Guides

Support multiple languages in your documentation

The Guides section dives deeper into specific use cases, workflows, or advanced features of the API. It can include: Detailed Tutorials: Step-by-step guides for common tasks or integrations. Best Practices: Recommendations for efficient and secure use of the API. Advanced Features: Exploration of more complex API functionalities not covered in the basic usage examples. Guides are more narrative and can combine multiple API end

Setup

  1. Put all supported languages in a file.
i18n.ts
export const defaultLanguage = 'en';
export const languages = ['en', 'cn'];
  1. 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,
  ...
});
  1. 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).*)'],
};
  1. 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,
    })),
  );
}

Last updated on