【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

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

ルーティング

• サブパスによるルーティング ロケールを 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,
  },
}