Next.js App Routerでレイアウトを保持しつつカスタム404ページを表示する

404ページをカスタムするにはnot-found.tsを作成してpage.tsxから条件に応じてnotFound()を呼び出せばよいのですが、存在しないルートにアクセスした場合はレイアウトが適用されません。

そこでCatch-all Segments([...folderName])を使用して存在しないルートにアクセスした場合でも404ページにレイアウトが適用されるようにします。

まずlayout.tsxと同じ階層にnot-found.tsxを作成します。

loading...

次にCatch-all Segmentsを使用して、存在しないルートにアクセスした場合の処理を作成します。

loading...

最終的なディレクトリ構成

loading...

これで/user/posts, /user/profile以外のルートにアクセスした場合、レイアウトが適用された404ページが表示されるようになります。

参考