🫠

【Next.js】Mac以外の環境で動かすと Hydration failedになってしまう

2024/12/14に公開

普段Macを使用してNext.jsでの開発をしています。
新規で立ち上げたプロジェクトをCloud RunへデプロイしようとDockerコンテナを作成した際に問題が起きて沼ったので備忘録です。

起こったこと

Mac上ではnpm run build → npm run startで正常に起動できブラウザでも問題無く表示されていました。
ですが、Dockerに載せるとブラウザでHydration failedエラーが発生してしまいます。

発生環境

next:15.1.0
react:19.0.0
ローカル:AppleSilicon Mac
Docker:node:lts

原因

原因はディレクトリの構造でした。
パスを/app/hogehogeとするためにディレクトリを
/app/app/layout.tsx
と作っていたのですが、このlayout.tsxがルートのlayoutファイルと扱われてしまってエラーになっていたようです。

解決策

パスをappからdashboardと変更して解決しました。

なぜローカルのMacでは問題無かったのか謎のままです。
ファイルシステムの違いとか関係あるのかもですが、詳しくないので分かりません。。

Discussion