サーバーとブラウザの表示が食い違う（Hydration）
Error: Hydration failed because the initial UI does not match what was rendered on the server. Text content does not match server-rendered HTML.
ひとことで言うと
「最初にサーバーが作った画面と、ブラウザで作り直した画面の中身が違います」という意味です。Next.js などで出ます。
よくある原因
- 今の時刻やランダムな数を、そのまま表示している
localStorageやwindowを、最初の表示で使っている<p>の中に<div>を入れるなど、HTMLのルールに合わない入れ方をしている
自分で確かめること
- 日付・時刻・ランダムな数を表示している場所がないか見る
<p>の中に<div>が入っていないか見る
たいていは、こうすると直ります
ブラウザでしか分からない値は、useEffect の中で読み込んでから表示します。HTMLの入れ方も直します。
AIへの伝え方
下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。
次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。 【エラー】 Error: Hydration failed because the initial UI does not match what was rendered on the server. Text content does not match server-rendered HTML. 【やったこと】 （ここに、エラーが出る前にしたことを書く。例：npm run dev を実行した） 【参考】 このエラーは「サーバーとブラウザの表示が食い違う（Hydration）」というもので、よくある原因は次のとおりです。 ・今の時刻やランダムな数を、そのまま表示している ・`localStorage` や `window` を、最初の表示で使っている ・`<p>` の中に `<div>` を入れるなど、HTMLのルールに合わない入れ方をしている どれに当てはまるかを確かめる方法も教えてください。