【Next.js】404 ページの作り方を not-found.tsx と notFound() の使い方まで解説

import Link from "next/link";

export default function NotFound() {
  return (
    <main className="mx-auto flex min-h-[70vh] max-w-xl flex-col items-center justify-center px-6 py-24 text-center">
      <p className="text-sm font-semibold tracking-widest text-zinc-500">404</p>
      <h1 className="mt-3 text-3xl font-semibold text-zinc-900">ページが見つかりません</h1>
      <p className="mt-4 text-zinc-600">
        URL が変わったか、ページが削除された可能性があります。
      </p>
      <Link
        href="/"
        className="mt-8 inline-flex min-h-11 items-center rounded-full bg-zinc-900 px-6 text-sm font-medium text-white hover:bg-zinc-700"
      >
        ホームに戻る
      </Link>
    </main>
  );
}

import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { cache } from "react";
import { getPostBySlug } from "@/lib/posts"; // 記事がなければ undefined を返す関数

// generateMetadata と page の取得を1回にまとめる
const getPost = cache(getPostBySlug);

type Props = { params: Promise<{ slug: string }> };

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) notFound();
  return { title: post.title, description: post.excerpt };
}

export default async function BlogPostPage({ params }: Props) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) notFound();

  return (
    <article className="mx-auto max-w-2xl px-6 py-24">
      <h1 className="text-3xl font-semibold">{post.title}</h1>
      <div className="mt-8 leading-relaxed text-zinc-700">{post.body}</div>
    </article>
  );
}

import Link from "next/link";

const popular = [
  { href: "/blog", label: "ブログ記事の一覧" },
  { href: "/pricing", label: "料金プラン" },
  { href: "/contact", label: "お問い合わせ" },
];

export default function NotFound() {
  return (
    <main className="mx-auto max-w-xl px-6 py-24 text-center">
      <p className="text-sm font-semibold tracking-widest text-zinc-500">404</p>
      <h1 className="mt-3 text-3xl font-semibold text-zinc-900">ページが見つかりません</h1>
      <p className="mt-4 text-zinc-600">URL が変わったか、ページが削除された可能性があります。</p>

      <form action="/search" method="get" role="search" className="mt-8 flex gap-2">
        <label htmlFor="q" className="sr-only">サイト内を検索</label>
        <input
          id="q"
          name="q"
          type="search"
          placeholder="キーワードで探す"
          className="min-h-11 flex-1 rounded-full border border-zinc-300 px-4 text-base"
        />
        <button type="submit" className="min-h-11 rounded-full bg-zinc-900 px-5 text-sm font-medium text-white">
          検索
        </button>
      </form>

      <ul className="mt-10 space-y-1 text-sm">
        {popular.map((item) => (
          <li key={item.href}>
            <Link href={item.href} className="inline-flex min-h-11 items-center underline underline-offset-4">
              {item.label}
            </Link>
          </li>
        ))}
      </ul>

      <Link
        href="/"
        className="mt-8 inline-flex min-h-11 items-center rounded-full border border-zinc-300 px-6 text-sm font-medium"
      >
        ホームに戻る
      </Link>
    </main>
  );
}

"use client";

import { motion, useReducedMotion } from "motion/react";

export function NotFoundNumber() {
  const reduceMotion = useReducedMotion();

  return (
    <motion.p
      aria-hidden="true"
      initial={reduceMotion ? false : { opacity: 0, y: 24 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, ease: "easeOut" }}
      className="text-[8rem] font-semibold leading-none tracking-tight text-zinc-900 sm:text-[12rem]"
    >
      404
    </motion.p>
  );
}

import { notFound } from "next/navigation";

// どのページにも一致しない URL をここで受け止め、[locale] の not-found.tsx を出す
export default function CatchAllPage() {
  notFound();
}