UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Next.js】Next.js 10 からi18n対応したルーティング

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

サンプルとして両方のコードサンプルがあるので助かる

ルーティング

いずれのルーティング戦略においても、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,
  },
}