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.
Put all supported languages in a file.
export const defaultLanguage = 'en' ; export const languages = [ 'en' , 'cn' ] ;
Change your current source configurations.
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.
import { defaultLanguage , languages } from '@/i18n' ; import { createI18nMiddleware } from 'fumadocs-core/middleware' ;
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 /app/[lang], and move all special files to
the folder.
export default function Layout ({ params , children , } : { params : { lang : string }; children : React . ReactNode ; }) { return ( < html lang = { params . lang } > < body > { children } </ body > </ html > ) ; }
Write documents, see Page Conventions to learn how to organize your documents.
Configure i18n on your search solution. For Flexsearch, see Setup I18n .
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) ; Generate parameters for every language and page.
export async function generateStaticParams () { return languages . flatMap ( ( lang ) => getPages (lang) !. map ( ( page ) => ( { slug : page . slug , lang , } )) , ) ; }