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ページが表示されるようになります。