Next.jsでのUnhandled Runtime Errorの嘘
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>.
ここの部分嘘やないか。