【Next.js】404ページのカスタマイズ

はじめに

next.js ではデフォルトで404ページを作成してくれていますが、サイトのデザインに合わせて404ページをカスタマイズするの方法です。

やり方

app直下にnot-found.tsxを作成します。

.
└── app
    ├── page.tsx
    ├── page.module.css
    ├── layout.tsx
    └── not-found.tsx

not-found.tsx に表示させたい404ページを作成します。

not-found.tsx

import Link from 'next/link'
 
export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

export default NotFound;

アプリケーションに存在しないURLにアクセスされた場合、全てこちらの404エラーページを表示してくれます。

予想されるエラーをキャッチすることに加えてnotFound()、ルートapp/not-found.jsファイルはアプリケーション全体の一致しない URL も処理します。つまり、アプリで処理されない URL にアクセスするユーザーには、ファイルによってエクスポートされた UI が表示されますapp/not-found.js
not-found.js