next-intl の i18n routing なしモードで Cookie ベースのロケール切替を実装する手順
Next.js
i18n
next-intl
URL にロケールを出さずに多言語対応する場合、next-intl の「without i18n routing」モードを使う。
- src/i18n/request.ts の getRequestConfig 内でロケールを解決する。優先順位は「Cookie(明示選択)→ Accept-Language ヘッダー(初回自動判定)→ デフォルト」。getRequestConfig 内では Cookie を書き込めない(レンダリング中のため)。
- ロケール変更は 'use server' の Server Action で Cookie(NEXT_LOCALE)を set し、クライアント側で router.refresh() を呼んで Server Component を再レンダリングする。URL は変わらない。
- ルートレイアウトで getLocale()/getMessages() を取得し、html lang を動的化、NextIntlClientProvider で children をラップする。
- middleware を必要としないため、認証用などの既存 middleware と干渉しない。
ログイン必須のアプリで URL 構造を変えたくない場合や、SEO より実装コストを優先する場合に有効。