Waku

Setup

Define the i18n configurations in a file, we will import it with @/lib/i18n in this guide.

src/lib/i18n.ts

import { defineI18n } from 'fumadocs-core/i18n';

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

See available options for i18n config.

Routing

Add a [lang] prefix to all your pages.

index.tsx

docs/[...slugs].tsx

api/search.ts

Translations

Define your translations in lib/layout.shared.tsx, see Translations for more details (including official language packs).

You can also add locale parameter to baseOptions() for localized layout options:

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(locale: string): BaseLayoutProps {
  return {
    // different props based on `locale`
    nav: {
      title: 'My App',
      url: `/${locale}`,
    },
  };
}

Pages

Waku does not expose route segment params from useRouter(). Extract the locale from the path, then pass translations to <RootProvider />:

src/components/provider.tsx

'use client';
import type { ReactNode } from 'react';
import { RootProvider } from 'fumadocs-ui/provider/waku';
import { i18nProvider } from 'fumadocs-ui/i18n';
import { useRouter } from 'waku/router/client';
import { i18n } from '@/lib/i18n';
import { translations } from '@/lib/layout.shared';

export function Provider({ children }: { children: ReactNode }) {
  const router = useRouter();
  const lang = router.path.split('/')[1] ?? i18n.defaultLanguage;

  return (
    <RootProvider
      i18n={i18nProvider(translations, lang)}
    >
      {children}
    </RootProvider>
  );
}

Pass Locale

Pass the locale to Fumadocs in your pages and layouts.

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

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

Search

Configure i18n on your search solution.

Built-in Search (Orama): See Internationalization.
Cloud Solutions (e.g. Algolia): They usually have official support for multilingual.

Writing Documents

See i18n routing to learn how to create pages for specific locales.

Fumadocs only handles navigation for its own layouts (e.g. sidebar). For other places, extract the locale from the path and prepend it to links.

import { Link, useRouter } from 'waku/router/client';

const router = useRouter();
const lang = router.path.split('/')[1];

<Link to={`/${lang}/about`}>About Us</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>