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