Next.jsのApp Routerにおけるエラーハンドリングまとめ
まだ調査中の内容もあるため間違っている可能性が非常に高いです、あしからず。
Next.js の App Router におけるエラーハンドリングは /404 や /500 へリダイレクトをかけず、url のパスはそのままエラー表示を行うのが基本線となっています。
ということはまずはベーシックなエラーハンドリングを。
error.js
1 番よく使われるパターンです。
各 page 以下のサーバーサイドまたはクライアントサイドでエラーが throw された場合に表示されます。
ただし同一レイヤーの layout で発生したエラーのハンドリングは行うことができません。
言い換えると、理屈上は root layout 以外はハンドリングできるということですね。
global-error.js
root layout でエラーが throw された場合に表示されます。
意外と知られていない印象です、自分も全然知りませんでした。
注意点として、production 環境でのみ動作するため、ローカルで確認するためには build して start をかける必要があります。
not-found.js
app のパスに紐づく page が存在しない場合に表示されます。
これはわかりやすいですね。
基本的には上記がすべてなのですが、個人的には以下のケースについて認識が曖昧でした。
- middleware でエラーを throw したい場合
- Api Route でエラーを throw したい場合
一応調べた結果を書いていこうと思います。
middleware
middleware 内でエラーを throw するのは NG のようです。
エラーを throw したいケースであっても、redirect などで対応するようにしましょう。
Api Route
middleware と違いこちらのケースは意外とやっかいで。
結論から書いてしまうと、Api Route 内で url の redirect を行うことはできません。
エラーを throw するのもなるべく避けるべきですが、起きるときは起きると思います。
そのため基本的には呼び出し側、つまり page 側でハンドリングして、よしなに対応するようにしましょう。
個人的にはどうしても /500 とか /error のようなパスを切って redirect をかけたくなってきますが。
Next.js 的には redirect によるハンドリングはイマイチなのかなーという印象を受けました。
頑張ってその url のパス内で完結させるよう心がけてみようと思います。