Next.jsで発生するHydration Error(サーバーがレンダリングしたHTML構造・コンテンツと、クライアントでReactが生成するDOMツリーが一致しない場合に発生するエラー)について、原因と解決策を解説する記事です。原因としてはwindow、document、localStorageなどブラウザAPIの使用や、Math.random()、new Date()の使用が挙げられています。
解決策としては、useEffectでクライアント専用処理を分離する方法、next/dynamicとssr: falseオプションでSSR(サーバーサイドレンダリング)を無効化する方法、「use client」ディレクティブで実行環境を明示する方法、HTMLのネスト規則を遵守する方法が紹介されています。suppressHydrationWarningは最終手段として限定的な使用にとどめることが推奨されています。
出典が伝えている要点
- Next.js Hydration Errorは、サーバーでレンダリングされたHTML構造・コンテンツと、クライアントでReactが生成するDOMツリーが一致しない場合に発生する
- 記事はNext.js ^14.0.0、React ^18.0.0、Node.js ^18.0.0を対応バージョンとして扱っている
- Hydration Errorの発生原因として window、document、localStorage などのブラウザAPIの使用が挙げられている
- Hydration Errorの発生原因として Math.random() や new Date() の使用が挙げられている
- 解決策としてuseEffectでクライアント専用処理を分離する方法が挙げられている
- 解決策としてnext/dynamicとssr: falseオプションを使いSSRを無効化する方法が挙げられている
- 解決策として"use client"ディレクティブ(Next.js 13以降)で実行環境を明示する方法が挙げられている
- 解決策としてHTMLのネスト規則を遵守することが挙げられている
- suppressHydrationWarningは最終手段として限定的な使用が推奨されている
- コンポーネントの純粋性を維持することがベストプラクティスとして挙げられている
- 記事は2026年9月9日に公開された
原文より
サーバーでレンダリングされたHTML構造やコンテンツと、クライアントでReactが生成するDOMツリーが一致しない場合に発生
出典: zenn.dev