Tanstack Start
Support i18n routing on your Tanstack Start + Fumadocs app.
Setup
Define the i18n configurations in a file, we will import it with @/lib/i18n in this guide.
import { defineI18n } from 'fumadocs-core/i18n';
export const i18n = defineI18n({
defaultLanguage: 'en',
languages: ['cn', 'en'],
});See available options for i18n config.
Routing
Create a $lang directory under routes, and move all pages into it.
Provide UI translations and other config to <RootProvider />, the English translations are used as fallbacks.
import { HeadContent, Scripts, useParams } from '@tanstack/react-router';
import * as React from 'react';
import { RootProvider } from 'fumadocs-ui/provider/base';
import { TanstackProvider } from 'fumadocs-core/framework/tanstack';
import { defineI18nUI } from 'fumadocs-ui/i18n';
import { i18n } from '@/lib/i18n';
const { provider } = defineI18nUI(i18n, {
translations: {
cn: {
displayName: 'Chinese',
search: 'Translated Content',
},
en: {
displayName: 'English',
},
},
});
function RootDocument({ children }: { children: React.ReactNode }) {
const { lang } = useParams({ strict: false });
return (
<html suppressHydrationWarning>
<head>
<HeadContent />
</head>
<body className="flex flex-col min-h-screen">
<TanstackProvider>
<RootProvider
i18n={provider(lang)}
>
{children}
</RootProvider>
</TanstackProvider>
<Scripts />
</body>
</html>
);
}Pass Locale
Add locale parameter to baseOptions() and include i18n in props:
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`
};
}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.
Navigation
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.
import { Link, useParams } from '@tanstack/react-router';
const { lang } = useParams({ from: '/$lang/' });
<Link
to="/$lang/docs/$"
params={{
lang,
_splat: '',
}}
>
Open Docs
</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>How is this guide?
Last updated on