Next.js の React ハイドレーション エラー - 「サーバー HTML に <a> タグと一致する <a> タグが含まれることが予想されます」

Question

Next.js プロジェクトに取り組んでいますが、ハイドレーション エラーが繰り返し発生します。私が見た具体的なエラー メッセージは次のとおりです:

エラー: 初期 UI がサーバー側でレンダリングされたときにレンダリングされるものと一致しないため、ハイドレーションは失敗しました。

警告: サーバー HTML には一致する <div> が含まれることが予想されます。

これは、サーバー側レンダリング (SSR) HTML と、クライアント側でのハイドレーション中に React によって生成された HTML との間の不一致が原因である可能性があることを理解しています。警告: サーバーでレンダリングされた HTML には <div> タグが必要でしたが、見つかりませんでした。

リーリー

NextJS 13 でこのエラーを修正するにはどうすればよいですか?

Answer 1

この問題は Next.js のコンポーネントが原因で発生します。コンポーネントを標準の <a> タグに置き換えることで問題を修正しました:

リーリー

これにより、このコンポーネントのようなクライアント側のナビゲーションを有効にする代わりに、リンクをクリックするとページ全体が強制的に更新されます。これは回避策であり、ページのリロードによりパフォーマンスに影響を与える可能性があることに注意してください。