X (Twitter)

Before you get started

Fumadocs はフルパワーの i18n ライブラリではなく、独自のコンポーネントとユーティリティのみを管理します。

アプリの残りの部分には、next-intl などの他のライブラリを使用できます。 Next.js での I18n の実装の詳細については、Next.js ドキュメントをお読みください。

手動セットアップ

i18n 構成をファイルで定義します。このガイドでは、@/ilb/i18n を使用してそれをインポートします。

それをソースローダーに渡します。

lib/source.ts

import { i18n } from '@/lib/i18n';
import { loader } from 'fumadocs-core/source';

export const source = loader({
  i18n, 
  // other options
});

また、Fumadocs UI レイアウトオプションを更新します。

app/layout.config.tsx

import { i18n } from '@/lib/i18n';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(locale: string): BaseLayoutProps {
  return {
    i18n,
    // different props based on `locale`
  };
}

ミドルウェア

ユーザーを適切なロケールにリダイレクトするミドルウェアを作成します。

{
  "file": "../../examples/i18n/middleware.ts",
  "codeblock": {
    "lang": "ts",
    "meta": "title=\"middleware.ts\""
  }
}

カスタマイズ可能なオプションについては、Middleware]を参照してください。

これはオプションであり、独自のミドルウェアまたは i18n ライブラリによって提供されるミドルウェアを使用することもできることに注意してください。

Rルーティング

/app/[lang] フォルダーを作成し、すべてのファイル (例: page.tsx、layout.tsx) を /app からフォルダーに移動します。

ルートプロバイダーを I18nProvider 内にラップし、利用可能な言語と翻訳を提供します。デフォルトでは英語翻訳のみが提供されることに注意してください。

app/[lang]/layout.tsx

import { RootProvider } from 'fumadocs-ui/provider';
import { I18nProvider, type Translations } from 'fumadocs-ui/i18n';

const cn: Partial<Translations> = {
  search: 'Translated Content',
  // other translations
};

// available languages that will be displayed on UI
// make sure `locale` is consistent with your i18n config
const locales = [
  {
    name: 'English',
    locale: 'en',
  },
  {
    name: 'Chinese',
    locale: 'cn',
  },
];

export default async function RootLayout({
  params,
  children,
}: {
  params: Promise<{ lang: string }>;
  children: React.ReactNode;
}) {
  const lang = (await params).lang;

  return (
    <html lang={lang}>
      <body>
        <I18nProvider
          locale={lang}
          locales={locales}
          translations={{ cn }[lang]}
        >
          <RootProvider>{children}</RootProvider>
        </I18nProvider>
      </body>
    </html>
  );
}

ロケールをパスする

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

Search

Configure i18n on your search solution.

Built-in Search (Orama): For Supported Languages, no further changes are needed.

Otherwise, additional config is required (e.g. Chinese & Japanese). See Special Languages.
Cloud Solutions (e.g. Algolia): They usually have official support for multilingual.

Writing Documents

Fumadocs only handles navigation for its own layouts (e.g. sidebar). For other places, you can use the useParams hook to get the locale from url, and attend it to href.

import Link from 'next/link';
import { useParams } from 'next/navigation';

const { lang } = useParams();

return <Link href={`/${lang}/another-page`}>This is a link</Link>;

In addition, the fumadocs-core/dynamic-link component supports dynamic hrefs, you can use it to attend the locale prefix. It is useful for Markdown/MDX content.

content.mdx

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

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

Before you get started

Fumadocs はフルパワーの i18n ライブラリではなく、独自のコンポーネントとユーティリティのみを管理します。

手動セットアップ

i18n 構成をファイルで定義します。このガイドでは、@/ilb/i18n を使用してそれをインポートします。

それをソースローダーに渡します。

lib/source.ts

import { i18n } from '@/lib/i18n';
import { loader } from 'fumadocs-core/source';

export const source = loader({
  i18n, 
  // other options
});

また、Fumadocs UI レイアウトオプションを更新します。

app/layout.config.tsx

import { i18n } from '@/lib/i18n';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(locale: string): BaseLayoutProps {
  return {
    i18n,
    // different props based on `locale`
  };
}

ミドルウェア

ユーザーを適切なロケールにリダイレクトするミドルウェアを作成します。

{
  "file": "../../examples/i18n/middleware.ts",
  "codeblock": {
    "lang": "ts",
    "meta": "title=\"middleware.ts\""
  }
}

カスタマイズ可能なオプションについては、Middleware]を参照してください。

Rルーティング

/app/[lang] フォルダーを作成し、すべてのファイル (例: page.tsx、layout.tsx) を /app からフォルダーに移動します。

app/[lang]/layout.tsx

import { RootProvider } from 'fumadocs-ui/provider';
import { I18nProvider, type Translations } from 'fumadocs-ui/i18n';

const cn: Partial<Translations> = {
  search: 'Translated Content',
  // other translations
};

// available languages that will be displayed on UI
// make sure `locale` is consistent with your i18n config
const locales = [
  {
    name: 'English',
    locale: 'en',
  },
  {
    name: 'Chinese',
    locale: 'cn',
  },
];

export default async function RootLayout({
  params,
  children,
}: {
  params: Promise<{ lang: string }>;
  children: React.ReactNode;
}) {
  const lang = (await params).lang;

  return (
    <html lang={lang}>
      <body>
        <I18nProvider
          locale={lang}
          locales={locales}
          translations={{ cn }[lang]}
        >
          <RootProvider>{children}</RootProvider>
        </I18nProvider>
      </body>
    </html>
  );
}

ロケールをパスする

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

Search

Configure i18n on your search solution.

Built-in Search (Orama): For Supported Languages, no further changes are needed.

Otherwise, additional config is required (e.g. Chinese & Japanese). See Special Languages.
Cloud Solutions (e.g. Algolia): They usually have official support for multilingual.

Writing Documents

Fumadocs only handles navigation for its own layouts (e.g. sidebar). For other places, you can use the useParams hook to get the locale from url, and attend it to href.

import Link from 'next/link';
import { useParams } from 'next/navigation';

const { lang } = useParams();

return <Link href={`/${lang}/another-page`}>This is a link</Link>;

In addition, the fumadocs-core/dynamic-link component supports dynamic hrefs, you can use it to attend the locale prefix. It is useful for Markdown/MDX content.

content.mdx

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

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

国際化

手動セットアップ

ミドルウェア

Rルーティング

ロケールをパスする

Search

Writing Documents

Navigation

目次

国際化

手動セットアップ

ミドルウェア

Rルーティング

ロケールをパスする

Search

Writing Documents

Navigation

目次