Nextjsで_next/data/*/0.jsonにプリフェッチして404エラーがでてた時の修正方法

Nextjsで_next/data/*/0.jsonにプリフェッチして404エラーがでてた時の修正方法 のサムネイル画像
投稿日: ・ タグ: ReactNext.js

ある日、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のイシューを読みまくっていた自分が恥ずかしいです。
同じような間違いをしている方のために届けば幸いです。