Internationalization

Fumadocs has built-in support for internationalized routing. You can define a list of supported languages and pass it to i18n utilities. Read the Next.js Docs to learn more about implementing I18n in Next.js.

Setup

Put all supported languages in a file.

i18n.ts

export const defaultLanguage = 'en';
export const languages = ['en', 'cn'];

Change your current source configurations.

source.ts

import { languages } from '@/i18n';
import { map } from '@/.map';
import { loader } from 'fumadocs-core/source';

export const { getPage, getPages, pageTree } = loader({
  languages,
  ...
});

Create the middleware that redirects users when missing locale.

middleware.ts

import { defaultLanguage, languages } from '@/i18n';
import { createI18nMiddleware } from 'fumadocs-core/middleware';
import { NextRequest } from 'next/server';

export default createI18nMiddleware({
  languages,
  defaultLanguage,
});

export const config = {
  // Matcher ignoring `/_next/` and `/api/`
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

Create a dynamic route, ensure all special files are nested under /app/[lang].

app/[lang]/layout.tsx

export default function Layout({ params }: { params: { lang: string } }) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

Get Pages

To get the pages of a specific language, use the utilities exported from source.ts.

import { getPage, getPages, pageTree } from '@/source';

// get page tree
pageTree[params.lang];

// get page
getPage(params.slug, params.lang);

// get pages
getPages(params.lang);

Static Generation

Generate parameters for every language and page.

export async function generateStaticParams() {
  return languages.flatMap((lang) =>
    getPages(lang)!.map((page) => ({
      slug: page.slug,
      lang,
    })),
  );
}

Internationalization

Setup

Get Pages

Static Generation

On this page