Internationalization

Please refer to this guide to setup basic configurations and learn how to organize the documents.

Ensure you have your page tree, layout and middleware ready before getting started.

Setup

A I18nProvider is needed for localization.

Put your pages and layouts under /app/[lang]. Then, wrap the root provider inside of your i18n provider.

import { RootProvider } from 'fumadocs-ui/provider';
import { I18nProvider } from 'fumadocs-ui/i18n';
import type { ReactNode } from 'react';
 
export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <I18nProvider>
      <RootProvider>{children}</RootProvider>
    </I18nProvider>
  );
}

Adding Translations

We only provide english translation by default, you have to pass your translations to the provider.

<I18nProvider
  translations={{
    cn: {
      name: 'Chinese', // required
      search: 'Translated Content',
    },
  }}
></I18nProvider>

To allow users changing their language, add a <LanguageSelect /> component to the UI, for example, to sidebar footer.

[lang]/docs/layout.tsx

import { DocsLayout } from 'fumadocs-ui/layout';
import { LanguageSelect } from 'fumadocs-ui/i18n';
 
export default function Layout({ children }: { children: ReactNode }) {
  return <DocsLayout sidebar={{ footer: <LanguageSelect /> }} />;
}

Internationalization

Setup

Adding Translations

Add Language Switch

On this page