概要
Next.jsはユーザー体験(UX)を快適にするために遷移先で必要なファイルを予めロードしておく、プリフェッチ(prefetch)という機能がデフォルトで有効になっています。
ただし、これは同じFQDN内部のNext.jsの管理下にあるページのみにしか効力がありません。また、静的サイトジェネレータとして利用している場合はこのプリフェッチ機能を利用するためにtxtファイルを生成します。
このtxtファイルはNext.js管理外のファイルだと当然ながら生成されません。
したがって、Next.js管理下のページから同じFQDN内部の管理外へのページにリンクを設置した場合、404エラーが出ます。
例えば、このサイトは基本的にはNext.jsの静的生成(static site generator)で生成しており、それらのページはNext.jsの管理下にあります。
しかし、/blog配下およびお問い合わせページ(/script/mailform/contact/)など一部のページはその管理外となっています。
そのため、Next.js管理下のページから/blog配下などの管理外のページにリンクを張っているページでは開発コンソールで以下の404エラーが確認できます。

解決方法
Next.jsでリンクを記述する際に利用するnext/linkは、prefetch={false}をpropsで渡せばプリフェッチ機能を無効化できます。
この指定を行ったリンクはプリフェッチの際に使用するtxtファイルへアクセスしなくなるので、404エラーは発生しません。
特に挙動に変化は無いため見逃されやすいエラーですが、サーバーに余分なリクエストが渡っているのは確かなので、修正するべきでしょう。
追記
prefetch={false}を指定しても、クリック時にtxtファイルへのアクセスが発生する模様。
完全に防ぐには別タブへの遷移にするしかなさそうです。
コメント