Next.js 10 からi18n対応したルーティングができるようになったので調査してみた
プロジェクトのサイトは多言語対応しているのでありがたい
SSR, SSG
ページごとに静的生成またはサーバーレンダリングのいずれかを選択できる
i18nのget startからダウンロードすると
https://nextjs.org/docs/advanced-features/i18n-routing
pages ├── gsp │ ├── [slug].js │ └── index.js ├── gssp.js └── index.js
サンプルとして両方のコードサンプルがあるので助かる
ルーティング
- サブパスによるルーティング
ロケールを URL に記述する
これにより、すべての言語に対して単一のドメインで対応できる
たとえば、/nl-nl/blog
や/en/blog
というように URL にロケールを挿入することができる - ドメインによるルーティング
ロケールをトップレベルのドメインにマッピングすることができる
たとえばexample.nl
はnl
ロケールにマッピングされ、example.com
はen
ロケールにマッピングされる
いずれのルーティング戦略においても、Next.js の設定でロケールを設定することから始める
// next.config.js module.exports = { i18n: { locales: ['en', 'nl'], defaultLocale: 'en' } }
自動ロケール検出
ユーザーがアプリケーションルート(通常/)にアクセスすると、Next.jsは、Accept-Languageヘッダーと現在のドメインに基づいて、ユーザーが希望するロケールを自動的に検出する
・無効化 自動ロケール検出は、次の方法で無効にできる
// next.config.js module.exports = { i18n: { localeDetection: false, }, }