[Next.js] “Expected server HTML to contain a matching <tr> in <table>.” というエラーの解消方法

Next.js
投稿日:
カテゴリー Next.js/React

Next.jsで以下のエラーが発生する時の修正方法について説明します。

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <tr> in <table>.

修正方法

<tr><td>を<thead>または<tbody>で囲みます。

<table>
    <thead>
        <tr><th>...</th></tr>
    </thead>
    <tbody>
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
    </tbody>
</table>

広告