[Next.js]Error: Text content does not match server-rendered HTML. の原因と対処法

コード内でクラス名やテキストの出し分けをしていると、レンダー時とクライアント側でコードが一致しませんといったエラーが表示されました。

デプロイ後はエラーは関係ないようですが、開発時には邪魔すぎるので対処していこうと思います。

エラー内容

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

原因

今回はURLパラメーターに応じて出力を出し分けしようとしたところ、パラメーター設置時の出力内容がレンダー時のものと違うことでエラーが出たようです。

対処法

該当箇所にsuppressHydrationWarningを付けることでエラーが発生しなくなります。コードを調整することでの解消もできますが、局所的に使う分には良いかなと思っています。

<p suppressHydrationWarning={true}>{variable}</p>

まとめ

何度か起きていて、記事を探すのが面倒でとりあえずまとめておきました。

参考記事

ReactでDateに関してWarning: XXX did not match.になるとき