はじめに
「npm run start したら Hydration Error がドーン！」
「でも npm run dev では何も起きない…？」
Next.js v15.3.5 と MUI v7 を組み合わせたプロジェクトで、そんな謎の現象に遭遇しました。
しかも console に出るのは warning じゃなくて error。心臓に悪い。
この記事では、調査の泥臭い過程から最終的な解決までをユーモア混じりで共有します。
現象
- 開発モード (npm run dev) → 何事もなく動作
- 本番モード (npm run start) → React Hydration Error が爆誕
最初に思ったのは「これは MUI の SSR スタイル問題に違いない！」というやつです。
Uncaught Error: Minified React error #418; visit https://react.dev/errors/418?args[]=HTML&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
まずは Cursor と Copilot に相談してみた
「一人で悩むより、AI に聞いてみるか」と思い、Cursor と GitHub Copilot に調査を依頼。
結果は……
- Cursor → ファイルを舐めるようにチェック → useQueryMedia を発見 → 「これだー！」とテンション爆上げ
- でも、よく見たらそのファイルの冒頭に use client がちゃんとある
- ……完全にぬか喜び
子供が砂場で「宝物見つけた！」って言ってるような微笑ましさ。
とはいえ、残念ながらエラーは消えません。
やっぱり最後は人間が地道に調査するしかないのです。
人力での切り分け
そこで縮小再現法を駆使して調査を続行。
- AppRouterCacheProvider → 問題なし
- ThemeProvider → 問題なし
- use client → 適切に付与済み
- MUI 側 → とくに怪しい挙動なし
結論：
サーバーとクライアントで生成される style が一致していない → Next.js 側が怪しい。
決め手はバージョン比較
バージョンを変えて試したら、はっきりしました。
- v15.3.5 → エラーあり
- v15.4.0 → エラーあり
- v15.4.1 → エラー消えた！
- v15.5.0（2025/08 最新リリース） → エラー消えた！
リリースノートを見ると、v15.4.1 で Hydration 問題を修正とあるじゃないですか。
つまり、原因はやっぱり Next.js 本体のバグ。
解決方法
結論：Next.js を v15.4.1 以上にアップデートする。
自分は最新の v15.5.0 に上げて解決しました。
これだけ。MUI 側をいじる必要はゼロでした。
まとめ
- Next.js v15.3.5 + MUI v7 で Hydration Error が発生
- 原因は MUI ではなく Next.js 側のバグ
- v15.4.1 以降で修正済み
- 最新版にアップデートすれば 世界は平和
Cursor / Copilot にも相談しましたが、彼らは「頼れる探偵」というより「隣で一緒に首をかしげてくれる幼なじみ」みたいな存在でした。
心の支えにはなりますが、最終的にバグを仕留めるのは人間の地道な調査。
でも無事に解決したので、今日も世界は平和です ✨