Next.jsで「Hydration failed because the initial UI does not match what was rendered on the server」というエラーが発生しました。最も一般的な原因はどれですか？

解説

正解は「サーバーとクライアントで異なるHTMLが生成されている」です。Next.jsはSSR/SSGで生成したHTMLをクライアント側でhydrate（再利用）しますが、サーバーで生成したHTMLとクライアントで生成されるHTMLが一致しない場合にこのエラーが発生します。よくある原因として、Date.now()やMath.random()の使用、typeof window !== "undefined" による条件分岐、ブラウザ拡張機能によるDOM変更、<p>タグの中に<div>を入れるなどの不正なHTML構造があります。useEffectで動的コンテンツをマウント後に描画する、suppressHydrationWarningを限定的に使用するなどの対処が有効です。