NextJS特定バージョンのlocale周りでredirect loopになる件

今回はタイトルの通り、NextJSのlocale周りでredirect loopになる件を記事にします。
NextJSのissueにコメントあるものの、日本語の情報があまりなくハマったので知見の共有です。

前提: 依存ライブラリや設定内容

事象再現時の依存ライブラリ

• NextJS: v13.5.3, v14.2.5 (今回はハマり事例なので左記は問題のあったバージョンです)

再現時のアプリのlocale仕様

• en, ja の2言語に対応
• default locale = en に設定。 (https://host/ = https://host/en)

事象: 自動でのlocale切り替えによる無限ループ

依存ライブラリの更新作業中に、特定バージョンのNextJSにて /en <-> /ja が無限ループになる不具合が生じました。不具合の再現頻度は高く、はまると抜けられないのですが、シークレットモードにすると解決したりします。chrome devtoolで確認したり、cookie等を操作してデバッグするも、結局再現理由については追及コストが高くて断念しました。

原因: 特定のNextJSバージョン以降での既知の事象

調べてみると、以下のissueに記載がある既知の事象のようで、特定バージョン以降のNextJSでは該当のredirect loopに似た事象が報告されていました。

https://github.com/vercel/next.js/issues/55648

解決策: バージョン戻し or 自前実装

修正方法としては次の2つが主に述べられていました。

1. 特定のNextJSバージョンまで戻す: v14.1.3
2. i18n周りの設定を調整する
3. 自前でlocale管理を実装する

自身の環境では、実際にセーフなバージョンまで戻すと問題は再現しなくなりました。

※ ちなみに、v14.2.5 に上げることを試みましたが、問題の挙動が再現したので見合わせています。

自動でのlocaleハンドリングを無効化して自前実装に寄せた方が見通しよくなり、制御が効くのかもしれませんが、今回は開発効率から見合わせました。ただ、NextJSのバージョンを上げられないままでいるのは、性能・セキュリティ面で支障も出てくるので、どこかで見切りをつけ、設定を調整するか、自前実装にて制御することも検討が必要だろうと考えています。

告知
この記事が少しでも誰かのお役に立てば幸いです。
よかったら、今回の知見を得たきっかけになったサービス、Aroundsに遊びに来てください♪
趣味や愛用品があなたを物語ってくれる、新しいスタイルのLink in bioプラットフォームです。

(私含め)口下手も多かろうエンジニアチームでのコミュニケーション促進も果たせると思うので
好きな漫画や信仰している技術書、デスク周りのガジェット、思い出の旅行先など集めて教えてください^^

Happy hacking!