X (Twitter)

Before you get started

Fumadocs 不是一个功能齐全的 i18n 库，它仅管理自己的组件和实用程序。

您可以将 next-intl 等其他库用于应用程序的其余部分。阅读 Next.js 文档了解有关在 Next.js 中实现 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\""
  }
}

有关可自定义选项，请参阅中间件。

注意，这是可选的，您也可以使用自己的中间件或 i18n 库提供的中间件。

路由

创建 /app/[lang] 文件夹，并将 /app 中的所有文件（例如 page.tsx、layout.tsx）移动到该文件夹。

将根提供程序包装在 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>
  );
}

Pass 区域设置

将语言环境传递给页面和布局中的 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 库，它仅管理自己的组件和实用程序。

您可以将 next-intl 等其他库用于应用程序的其余部分。阅读 Next.js 文档了解有关在 Next.js 中实现 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\""
  }
}

有关可自定义选项，请参阅中间件。

注意，这是可选的，您也可以使用自己的中间件或 i18n 库提供的中间件。

路由

创建 /app/[lang] 文件夹，并将 /app 中的所有文件（例如 page.tsx、layout.tsx）移动到该文件夹。

将根提供程序包装在 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>
  );
}

Pass 区域设置

将语言环境传递给页面和布局中的 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>

国际化

手动设置

中间件

路由

Pass 区域设置

Search

Writing Documents

Navigation

目录

国际化

手动设置

中间件

路由

Pass 区域设置

Search

Writing Documents

Navigation

目录