ハイドレーション時にテキストがサーバーとクライアントで異なるとエラーが発生する

[takecchi]

関連Issue

(無ければ空)

概要

サーバーサイドとクライアントサイドでレンダー結果が異なる場合に発生するエラー。
https://develop.cuculus.jp/takecchi/posts/71611659296186368

エラーの内容

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

Warning: Text content did not match. Server: "24秒前" Client: "25秒前"

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

参照: https://nextjs.org/docs/messages/react-hydration-error

今回はPostの時刻表示の部分で発生しており、ドキュメントにもあるように必然的に異なるケースに該当する為、以下の対応でよさそう

suppressHydrationWarning={true}

Todo

• やることリスト