X (Twitter)

Before you get started

Fumadocs n'est pas une bibliothèque i18n à part entière, elle gère uniquement ses propres composants et utilitaires.

Vous pouvez utiliser d'autres bibliothèques comme next-intl pour le reste de votre application. Lisez les Next.js Docs pour en savoir plus sur l'implémentation d'I18n dans Next.js.

Configuration manuelle

Définissez les configurations i18n dans un fichier, nous l'importerons avec @/ilb/i18n dans ce guide.

Transmettez-le au chargeur de sources.

lib/source.ts

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

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

Et mettez à jour les options de mise en page de l'interface utilisateur de Fumadocs.

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`
  };
}

Intergiciel

Créez un middleware qui redirige les utilisateurs vers les paramètres régionaux appropriés.

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

Voir Middleware pour les options personnalisables.

Notez que ceci est facultatif, vous pouvez également utiliser votre propre middleware ou celui fourni par les bibliothèques i18n.

Routage

Créez un dossier /app/[lang] et déplacez tous les fichiers (par exemple page.tsx, layout.tsx) de /app vers le dossier.

Enveloppez le fournisseur racine dans I18nProvider et fournissez-lui les langues et traductions disponibles. Notez que seules les traductions en anglais sont fournies par défaut.

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>
  );
}

Paramètres régionaux ### Pass

Transmettez les paramètres régionaux à Fumadocs dans vos pages et mises en page.

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 n'est pas une bibliothèque i18n à part entière, elle gère uniquement ses propres composants et utilitaires.

Vous pouvez utiliser d'autres bibliothèques comme next-intl pour le reste de votre application. Lisez les Next.js Docs pour en savoir plus sur l'implémentation d'I18n dans Next.js.

Configuration manuelle

Définissez les configurations i18n dans un fichier, nous l'importerons avec @/ilb/i18n dans ce guide.

Transmettez-le au chargeur de sources.

lib/source.ts

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

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

Et mettez à jour les options de mise en page de l'interface utilisateur de Fumadocs.

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`
  };
}

Intergiciel

Créez un middleware qui redirige les utilisateurs vers les paramètres régionaux appropriés.

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

Voir Middleware pour les options personnalisables.

Notez que ceci est facultatif, vous pouvez également utiliser votre propre middleware ou celui fourni par les bibliothèques i18n.

Routage

Créez un dossier /app/[lang] et déplacez tous les fichiers (par exemple page.tsx, layout.tsx) de /app vers le dossier.

Enveloppez le fournisseur racine dans I18nProvider et fournissez-lui les langues et traductions disponibles. Notez que seules les traductions en anglais sont fournies par défaut.

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>
  );
}

Paramètres régionaux ### Pass

Transmettez les paramètres régionaux à Fumadocs dans vos pages et mises en page.

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>

Internationalisation

Configuration manuelle

Intergiciel

Routage

Search

Writing Documents

Navigation

Table des matières

Internationalisation

Configuration manuelle

Intergiciel

Routage

Search

Writing Documents

Navigation

Table des matières