Support multiple languages in your documentation
Before you get started
Fumadocs is not a full-powered i18n library, it manages only its own components and utilities.
You can use other libraries like next-intl for the rest of your app. Read the Next.js Docs to learn more about implementing I18n in Next.js.
Define the i18n configurations in a file, we will import it with @/ilb/i18n in this guide.
Pass it to the source loader.
import { i18n } from '@/lib/i18n';
import { loader } from 'fumadocs-core/source';
export const source = loader({
i18n,
// other options
});And update Fumadocs UI layout options.
import { i18n }
Create a middleware that redirects users to appropriate locale.
{
"file": "../../examples/i18n/middleware.ts",
"codeblock": {
"lang": "ts",
"meta": "title=\"middleware.ts\""
}
}See Middleware for customisable options.
Note that this is optional, you can also use your own middleware or the one provided by i18n libraries.
Create a /app/[lang] folder, and move all files (e.g. page.tsx, layout.tsx) from /app to the folder.
Wrap the root provider inside I18nProvider, and provide available languages & translations to it.
Note that only English translations are provided by default.
import { RootProvider }
Pass the locale to Fumadocs in your pages and layouts.
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.
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
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.
import { DynamicLink } from 'fumadocs-core/dynamic-link';
<DynamicLink href="/[lang]/another-page">This is a link</DynamicLink>Join the community
Subscribe to our newsletter for the latest news and updates
