はじめに

「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 にも相談しましたが、彼らは「頼れる探偵」というより「隣で一緒に首をかしげてくれる幼なじみ」みたいな存在でした。
心の支えにはなりますが、最終的にバグを仕留めるのは人間の地道な調査。

でも無事に解決したので、今日も世界は平和です ✨