/posts/3 のように、URLの一部が可変になっているページ（動的ルート）を作ったとき、存在するIDでは問題なく表示できても、存在しないID（例えば /posts/9999）にアクセスされた時のことは考えていますか。悪意ある操作でなくても、削除済みの投稿へのリンクが古いブックマークに残っているだけで、普通に起こりうる場面です。8/30に書いた「error.tsx」の話は想定外に発生する例外の話でしたが、今回はその手前、「データが無い」という想定内の状態をどう扱うかという話です。

【Before: 何もしないと画面がクラッシュする】
Next.js（App Router）で app/posts/[id]/page.tsx のようなページを作ったとします。

// app/posts/[id]/page.tsx（悪い例）
export default async function PostPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const post = await getPost(id); // 存在しないIDだと post は null や undefined
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

存在しないIDが渡されると getPost(id) は何も見つからず、post が null や undefined になります。この状態で post.title にアクセスすると、実行時エラーが起きます。error.tsx を用意していればそちらの表示に切り替わりますが、用意していなければNext.jsの標準的なエラー表示になります。いずれにせよ、「見つかりませんでした」という意図した案内ではなく、意図しないエラー表示になってしまう点は変わりません。

【After: notFound() で正しく404にする】
Next.jsには、この状況をきちんと処理するための notFound() という関数が用意されています。

// app/posts/[id]/page.tsx（良い例）
import { notFound } from "next/navigation";

export default async function PostPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const post = await getPost(id);

  if (!post) {
    notFound(); // ここで処理を打ち切り、404ページに切り替える
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

notFound() を呼ぶと、その場でページのレンダリングを打ち切り、Next.jsが用意している404ページ（またはフォルダに置いた not-found.tsx）に切り替わります。想定外のクラッシュではなく、想定内の「見つかりませんでした」という表示を意図的に返せるようになります。

【After: 404ページも見た目を変えられる】
デフォルトの404ページは無地の簡素な表示ですが、app/posts/[id]/not-found.tsx のようなファイルを置くと、そのフォルダ配下で notFound() が呼ばれた時に表示する内容を自分で用意できます。

// app/posts/[id]/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>その投稿は見つかりませんでした</h2>
      <p>削除されたか、URLが間違っている可能性があります。</p>
    </div>
  );
}

一覧ページへ戻るリンクを添えておくだけでも、ユーザーが次に何をすればいいか迷わずに済みます。

【AIに確認するときの聞き方】
IDを受け取って表示するページを作ってもらったら、「存在しないIDが渡された時、notFound()は呼ばれていますか？」と一言確認するだけで、この種の見落としはその場で気づけます。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

プログラミングの知識だけでなく、AIへの指示の出し方や、AIが出してきたコードを自分の言葉で確認する目も、教材を進める中で自然に身についていきます。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください