猫でもわかるWeb開発・プログラミング

本業エンジニアリングマネージャー。副業Webエンジニア。Web開発のヒントや、副業、日常生活のことを書きます。

Next.js で <table> を使おうとして Hydration failed because the initial UI does not match what was rendered on the server.

Next.js でたまにこういうエラーが出てくる。

エラーが出てくるけど、dom は正常に描画されている。

どうやら、HTML タグの使い方がおかしい場合にこのエラーが出てくる事があるようだ。

私の場合は、<table> タグを使おうとしてこのエラーが出たのだが、<table> タグを使うときに、 <thead><tbody> タグをちゃんと使わないと、このエラーになるようだ。

以下だとエラーが出た

<table>
  <tr><th>ほげ</th><th>ふが</th></tr>
  <tr><td>hoge</td><td>fuga</td></tr>
</table>

<thead><tbody> を使うとエラーがおさまる。

<table>
  <thead>
    <tr><th>ほげ</th><th>ふが</th></tr>
  </thead>
  <tbody>
    <tr><td>hoge</td><td>fuga</td></tr>
  </tbody>
</table>

<thead> は、テーブルの見出しを表すタグで、 <tbody> はテーブルのデータ部分を表すタグ。見た目の変化は特にない。

webukatu.com