8. not-found.tsx — 404ページを作る

存在しない URL にアクセスされたときに表示するページは、app/not-found.tsx に書きます。default export したコンポーネントが、どのルートにもマッチしなかったときに自動で表示されます。

実務では、味気ない標準の 404 画面の代わりに、サイトのデザインに合わせた案内とトップへ戻るリンクを置くのが定番です。ユーザーが行き止まりで迷子にならないようにする、小さいけれど大事なページです。

URL 自体は存在するがデータが見つからない場合(例: 存在しない記事 ID)には、ページの処理の中で next/navigation の notFound() を呼ぶと、同じ 404 画面に切り替えられます。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// app/not-found.tsx — どのルートにもマッチしないとき表示される
import Link from "next/link";

export default function NotFound() {
  return (
    <main>
      <h1>ページが見つかりません</h1>
      <p>URL が変更されたか、削除された可能性があります。</p>
      <Link href="/">ホームに戻る</Link>
    </main>
  );
}

公式ドキュメントで詳しく ↗