Next.jsとマルチ言語対応のややこしい話

2021-04-08

現在携わっているプロジェクトにおいて、フロント側のマルチ言語対応が求められたのですが。

Next.js でマルチ言語対応を行うとなると、すんげーややこしい事実が見つかったので書き残しておこうと思います。

Next.js を使う場合、当たり前ですがサーバー側もマルチ言語対応が求められます。

となると、マルチ言語を実現するために使える技術ってあまり選択肢が存在しません。

基本的には以下の 3 つくらいかなーと思うのですが。

  • サブパス
  • ドメイン
  • Cookie

上記のうち、上 2 つは現状問題なく動くみたいです。

ドメインにおける正常動作は確認できていないですが、サブパスによる正常動作は以下の組み合わせで確認できました。

対して、Cookie によるマルチ言語対応を実現する方法は、現時点では恐らく正攻法が存在しません。

i18next-browser-languageDetector あたりを突っ込めばいけるかなーと試行錯誤したのですが、最新の next-i18next では正常動作せず…。

そのため、どうしても Cookie で実現したい場合は以下のいずれかの手法を使うしかないみたいです。

  1. next-i18next を 7.0.1 で使用する
  2. next-i18next を使用せず react-i18next あたりで実現する

1 については正常動作まで確認できました。

2 については未確認です、公式サイトにも next-i18next を使ったほうが良いよ って書かれてますし…。

そんな感じでした、まさか v7 から v8 のメジャーアップデートで 方針をがらっと変えている とは…。

個人的はせめて新規パッケージで作ってくれよと思うのですが、保守したくなかったのかなぁ？

SSR を含むマルチ言語対応時は、おとなしくサブパスかドメインで切り替えようねというお話でした。