Next.jsのリンクにhoverしたときにコンソールエラーが出るのでとりあえずprefetchをfalseにした

  • 投稿日
  • 著者 kngsmym
  • カテゴリー Next.js

ローカルで開発を進めてサーバにデプロイしたら、リンクにホバーした際にコンソールにGETエラーが出る事に気づいた。

https://ドメイン/リンク先のページ名.json?slug=リンク先のページ名

ネットで情報を漁ってみたらどうやらprefetchがhover時にあらかじめ情報を読み取ろうとしてできないからエラーとなっているようだった。

headllessCMSですべての情報はWordPressからGraphQLで持ってきてるので、そのあたりでprefetchが生成したURLでは情報が取得できてないのかと推測し、prefetchを無効にしたらエラーが吐き出されなくなるのでは、と考えてやってみたが、改善されなかった。

<Link href="/"
  className="hover:underline"
  prefetch={false}　←これ
>
  リンク文言
</Link>

根本的な解決としてはprefetchで正しく情報を取得できるようにするべきか、と考え、個別ページのURLが日本語まじり（書名をキーにしていたので）にしてたのを内部的なIDの半角英数にしたところ、エラーが吐き出されなくなった。

ローカルだと動いたので勢いでそのままにしてたけど２バイト文字はやっぱりまずいらしい。

prefetch自体がローカルとサーバーで挙動は微妙に違うらしく、いずれにしろサーバーに上げるまで気づかなかった。

Next.jsって「ローカルだと動くけど、サーバーだと〇〇が駄目」とか「vercelだと〇〇」ってのが多くてちょっと疲れた。

Next.js 手探りReact