🫠
【Next.js】Mac以外の環境で動かすと Hydration failedになってしまう
普段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