Next.jsで実装をしていたところ、以下のようなエラーが表示されました。
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.調べてみると、SSG（SG）したコンテンツを初期表示のタイミングで変更しようとしたのが原因とのことです。
ここ3ヶ月ほど業務でNext.jsを使っているのですが、日々学ぶことが多くて刺激を受けています。
Next.js楽しいですね。
同僚の方に伺ったところ、実はこれ、Next.jsを触る際に誰もが通ることになるエラーとのことでした。
アウトプットすることで知識への定着率もあがるので、メモも兼ねて記事にしようと思います。
今回の環境は以下の通りです。
- React：
- Next.js：
- TypeScript：
目次
React Hydration Errorを通してNext.jsのレンダリングを学ぶ
さて、まずは先ほどのエラーを再掲します。
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.DeepLで翻訳した内容が以下です。
初期UIがサーバーでレンダリングされたものと一致しないため、Hydrationに失敗しました。
DeepL
Hydration とは何でしょうか？
