Next.js I18n
この機能は nextra-theme-docs でのみ利用可能です。
Nextra は、Next.js の国際化ルーティング を標準でサポートしています。このドキュメントでは、その設定方法と使用方法について説明します。
I18n 設定の追加
Nextra アプリケーションに多言語ページを追加するには、まず next.config.mjs で i18n を設定する必要があります。
import nextra from 'nextra'
const withNextra = nextra({
theme: 'nextra-theme-docs',
themeConfig: './theme.config.tsx'
})
export default withNextra({
i18n: {
locales: ['en', 'zh', 'de'],
defaultLocale: 'en'
}
})注: UTS ロケール識別子 の任意の形式を使用して、next.config ファイルにロケールを定義できます。例えば、en-US (アメリカ合衆国で話される英語) のような言語と地域形式などです。
ドキュメントテーマの設定
theme.config.jsx に i18n オプションを追加して、言語ドロップダウンを設定します。
i18n: [
{ locale: 'en', name: 'English' },
{ locale: 'zh', name: '中文' },
{ locale: 'de', name: 'Deutsch' },
{ locale: 'ar', name: 'العربية', direction: 'rtl' }
]ユーザーが選択した言語を自動検出してリダイレクトする (オプション)
ユーザーの優先言語を自動的に検出して、サイトの対応するバージョンにリダイレクトできます。これを実現するには、プロジェクトのルートに middleware.js ファイルを作成し、nextra/locales から Nextra のミドルウェア関数をエクスポートします。
export { middleware } from 'nextra/locales'
export const config = {
// Matcher ignoring `/_next/` and `/api/`
matcher: [
'/((?!api|_next/static|_next/image|favicon.ico|icon.svg|apple-icon.png|manifest).*)'
]
}注: このアプローチは、nextConfig で output: "export" を使用して静的にエクスポートされた i18n サイトでは機能しません。
カスタム 404 ページ (オプション)
Nextra 3 では、共有テーマレイアウトを使用する i18n ウェブサイトで 404.mdx ページを作成することはできません。ただし、翻訳付きの 404.jsx ページを実装できます。その方法については、SWR i18n の例 を参照してください。
Nextra 4 では、共有テーマレイアウトを使用する i18n ウェブサイト用に、翻訳付きのカスタム not-found.jsx を作成できます。この実装については、SWR i18n の例 を確認してください。