🗂

Next.jsでmiddlewareからnot-foundページを呼ぶ方法

2024/05/02に公開

追記

残念ながら以下の方法ではルートのnot-found以外のページは表示することができませんでした。
そもそもnotFoundは特殊なエラーを投げるみたいで、それをキャッチしたNextがSuspenseでnot-foundページを表示していただけみたいです。つまりそもそもnot-foundページ自体存在しません。

追記の追記
勘違いしてました。そもそもNext.jsのAppRouterはアプリケーションに存在しないページを呼び出す場合、app/not-foundエラーを呼ぶようになっているみたいです。たとえhttp://localhost:8080/sub/nonexistpathのURLを叩いたとしてもapp/sub/not-foundは呼ばれないみたいです。app/sub/not-foundが呼ばれるのは、内部でnotFoundに限られるときだけでした。

Good to know: In addition to catching expected notFound() errors, the root app/not-found.js file also handles any unmatched URLs for your whole application. This means users that visit a URL that is not handled by your app will be shown the UI exported by the app/not-found.js file.

Next.jsのAppRouterではnotFound関数を使えばURLを保ったまま404ページを表示できます。

この挙動をmiddlewareで使いたかったのですが、残念ながらmiddlewareではnotFound関数は使えません。自前の自前の404ページにリダイレクトさせるとURLが変わってしまうので嫌でした。

こちらのGitHubのdiscussonで解決策を見つけた方がいました。

middlewareの中で以下の書き方をすればURLページを保ったまま404ページを表示できるみたいです。

return NextResponse.rewrite(new URL("/not-found", request.url));

Discussion