
ある日、Nextjsを使ったブログを開発中にコンソールに下記のようなエラーが出ているのを発見しました。
/_next/data/××××××××/page/0.json?number=0 404 (Not Found)
/_next/data/××××××××/page/2.json?number=2 404 (Not Found)
結論、自分で作ったページネーションが原因でした。
<Link href={`/${currentPageNumber - 1}`}>
← 前へ
</Link>
<Link href={`/${currentPageNumber + 1}`}>
次へ →
</Link>
上記のように記述してしまっていて Nextjsで「npm run build」したページを確認すると下記のように表示されます。
<a href="/page/0/">← 前へ</a>
<a href="/page/2/">← 次へ</a>
これの何が問題かというとNextjsがプリフェッチ(あらかじめ必要なデータを読み込む処理)するときに「/page/0/」「/page/2/」のような存在しないページにリクエストしてしまってエラーが出ていたことです。
Nextjsはデフォルト状態でプリフェッチ機能が有効になっているため「prefetch={false}」でプリフェッチを無効にするか、1ページ目のときはLinkタグを使わないような対応をする必要があります。
自分の場合は下記のように1ページ目以下のときはspanタグにすることによってこのエラーを解消しました。
{currentPageNumber <= 1 ? (
<span>
← 前へ
</span>
) : (
<Link href={`/${currentPageNumber - 1}`}>
← 前へ
</Link>
)}
不覚にもこんな初歩的なことで1時間以上溶かしてしまいました。
Nextjsに問題があるんじゃないかってことでGithubのイシューを読みまくっていた自分が恥ずかしいです。
同じような間違いをしている方のために届けば幸いです。