🚫
notFound() が error.tsx に喰われるのをなんとかする
はじめに
以下の構成のような not-found.tsx を置いた箇所よりもネストの深いディレクトリに error.tsx を置いた状態で、そのルートを通るページで notFound() を使用すると、not-found.tsx ではなく error.tsx が表示されてしまう。
src/app
├── path
│ ├── error.tsx
│ └── [id]
│ └── page.tsx <-- ここで notFound() 呼び出し
├── not-found.tsx
└── page.tsx
確認用のリポジトリとサイトは以下
確認時の Next.js のバージョンは 13.4.12
原因
notFound() 自体が、NEXT_NOT_FOUND というメッセージを持たせた Error を throw するだけのため[1]、 error.tsx を置いたときに Next.js によって設置される Error Boundary がこれに反応してしまう。
対処
error.tsx で、エラーが NEXT_NOT_FOUND だったら rethrow する。
お誂え向きな isNotFoundError なる関数が存在しているので、これで判定が可能。
この関数の内部処理は、digest プロパティ見てるだけなので、直接そっちを確認する形でもOK。
余談
これってバグ？仕様？(仕組み上、仕方がなかったりする？)
Discussion