Next.jsでのUnhandled Runtime Errorの嘘

公開日:2024年5月28日 更新日:2024年5月30日
programming

Link追加したら以下のErrorが出た。

Loading...
Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Expected server HTML to contain a matching <div> in <a>.

翻訳すると

未処理のランタイム エラー エラー: 初期 UI がサーバー上でレンダリングされたものと一致しないため、ハイドレーションに失敗しました。
詳細については、こちらをご覧ください: https://nextjs.org/docs/messages/react-hydration-error

サーバー HTML には、<a> に一致する <div> が含まれることが予期されます。

Reactではaタグの中にdevタグを入れるとErrorが出るようになる。

ただ今回の修正ではaタグの中にdivはれていない。

Loading...

ここのtagをLink(a)タグにしただけだった。

ただこのこのカードがLinkタグなので、aタグの中にaタグ状態になってしまっていた。

Expected server HTML to contain a matching <div> in <a>.

ここの部分嘘やないか。