コンテンツへスキップ
Fumadocs

国際化

React Routerのドキュメントを多言語に対応させます。

Fumadocs CLI

npx @fumadocs/cli init --i18n を実行すると、i18n に対応した新しいドキュメントをセットアップできます。手動で設定する場合は、以下の手順に従ってください。

概要

React Router と Fumadocs の両方で i18n ルーティングを設定します。

Fumadocs が担当するのは、ドキュメントのコンテンツとサイドバーの i18n です。アプリのその他の部分は、独自の i18n 設定で国際化してください。

セットアップ

i18n の設定をファイルに定義します。このガイドでは、@/lib/i18n としてインポートします。

app/lib/i18n.ts
import { defineI18n } from 'fumadocs-core/i18n';

export const i18n = defineI18n({
  defaultLanguage: 'en',
  languages: ['cn', 'en'],
});

i18n の設定で使用できるオプションについては、こちらを参照してください。

ルーティング

ページに :lang プレフィックスを追加します。

app/routes.ts
import { index, route, type RouteConfig } from '@react-router/dev/routes'; 
import { route, type RouteConfig } from '@react-router/dev/routes'; 

export default [
  index('routes/home.tsx'), 
  route('docs/*', 'routes/docs.tsx'), 
  route(':lang', 'routes/home.tsx'),
  route(':lang/docs/*', 'routes/docs.tsx'),
  route('api/search', 'routes/search.ts'),
] satisfies RouteConfig;

デフォルト言語をプレフィックスなし (例: /docs) で配信するには、パラメーターを省略可能にし、hideLocale を有効にします。

export default [
  route(':lang?', 'routes/home.tsx'),
  route(':lang?/docs/*', 'routes/docs.tsx'),
  route('api/search', 'routes/search.ts'),
] satisfies RouteConfig;

翻訳

翻訳は lib/layout.shared.tsx で定義します。公式の言語パックなど、詳しくは翻訳を参照してください。

また、baseOptions() に locale パラメーターを追加すると、ロケールごとにレイアウトオプションを切り替えられます。

app/lib/layout.shared.tsx
import { i18n } from '@/lib/i18n';
import { uiTranslations } from 'fumadocs-ui/i18n';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export const translations = i18n
  .translations()
  .extend(uiTranslations())
  .add({
    en: {
      displayName: 'English',
    },
    cn: {
      displayName: 'Chinese',
    },
  });

export function baseOptions(): BaseLayoutProps { 
export function baseOptions(locale: string = i18n.defaultLanguage): BaseLayoutProps { 
  return {
    // `locale` に応じて異なる props を指定
  };
}

翻訳を <RootProvider /> に渡します。

app/root.tsx
import {
  isRouteErrorResponse,
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useParams, 
} from 'react-router';
import { RootProvider } from 'fumadocs-ui/provider/react-router';
import { i18nProvider } from 'fumadocs-ui/i18n';
import { i18n } from '@/lib/i18n';
import { translations } from '@/lib/layout.shared';

export function Layout({ children }: { children: React.ReactNode }) {
  const { lang = i18n.defaultLanguage } = useParams(); 

  return (
    <html lang={lang} suppressHydrationWarning>
      <head>{/* ... */}</head>
      <body className="flex flex-col min-h-screen">
        <RootProvider
          i18n={i18nProvider(translations, lang)}
        >
          {children}
        </RootProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

ロケールを渡す

ページとレイアウトで、ロケールを Fumadocs に渡します。

import { i18n } from '@/lib/i18n'; 

export const source = loader({
  source: docs.toFumadocsSource(),
  baseUrl: '/docs',
  i18n, 
});

使用している検索ソリューションで i18n を設定してください。

  • 組み込み検索: 国際化を参照してください。
  • クラウドソリューション(Algolia など): 多くの場合、多言語対応が公式にサポートされています。

ドキュメントの作成

特定のロケール向けのページを作成する方法については、i18n ルーティングを参照してください。

Fumadocs がナビゲーションを処理するのは、Fumadocs 自身のレイアウト(サイドバーなど)のみです。

それ以外の場所では、useParams フックで URL からロケールを取得してください。

import { Link, useParams } from 'react-router';

const { lang } = useParams();

<Link to={`/${lang}/about`}>About Us</Link>;

fumadocs-core/dynamic-link コンポーネントは動的な href に対応しているため、Markdown/MDX コンテンツ内でロケールのプレフィックスを付加する際に利用できます。

content.mdx
import { DynamicLink } from 'fumadocs-core/dynamic-link';

<DynamicLink href="/[lang]/another-page">This is a link</DynamicLink>

How is this guide?

最終更新日

このページの内容

概要セットアップルーティング翻訳ロケールを渡す検索ドキュメントの作成ナビゲーション
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep