2つの名前が似ていて分かりにくい

Next.jsのコードを見ていると、 次のような処理が登場します。

if (!article) {
  notFound();
}

さらに、appフォルダー内には 次のようなファイルを作ります。

そもそも404ページとは？

404ページは、 ユーザーがアクセスしたURLに対応するページやデータが 見つからないときに表示するページです。

たとえば、次のような場合に404ページが必要になります。

ページが存在しないのに、 空白画面やプログラムのエラーを表示すると、 ユーザーは何が起きたのか分かりません。

notFound()とは？

notFound()は、 Next.jsが提供する関数です。

ページの処理中にnotFound()を実行すると、 そのルートで通常のページ表示を中断し、 対応するnot-foundファイルのUIへ切り替えます。

最初にimportする

import { notFound } from "next/navigation";

必要な条件で実行する

if (!article) {
  notFound();
}

このコードは、 articleが存在しなかった場合に notFound()を実行するという意味です。

not-found.tsxとは？

not-found.tsxは、 404時にユーザーへ表示するUIを作るためのファイルです。

import Link from "next/link";

export default function NotFound() {
  return (
    <main>
      <p>404</p>

      <h1>
        お探しのページは見つかりませんでした
      </h1>

      <p>
        URLが変更されたか、
        ページが削除された可能性があります。
      </p>

      <Link href="/">
        トップページへ戻る
      </Link>
    </main>
  );
}

ファイル名は not-found.tsxであり、 コンポーネント名は自由に付けられます。

notFound()とnot-found.tsxの関係

2つは、次の順番で連携します。

基本的な実装方法

App Routerで記事詳細ページを作る場合は、 次のような構成になります。

記事詳細ページ

import { notFound } from "next/navigation";

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

export default async function BlogDetail({
  params,
}: Props) {
  const { id } = await params;

  const article = await getArticle(id);

  if (!article) {
    notFound();
  }

  return (
    <article>
      <h1>{article.title}</h1>

      <div
        dangerouslySetInnerHTML={{
          __html: article.content,
        }}
      />
    </article>
  );
}

404ページ

import Link from "next/link";

export default function NotFoundPage() {
  return (
    <main className="not-found-page">
      <p className="not-found-page__number">
        404
      </p>

      <h1>
        お探しのページは見つかりませんでした
      </h1>

      <p>
        ページが削除されたか、
        URLが変更された可能性があります。
      </p>

      <Link href="/blog">
        記事一覧へ戻る
      </Link>
    </main>
  );
}

microCMSの記事詳細ページで使う

microCMSの記事詳細ページでは、 URLの記事IDを使ってデータを取得します。

しかし、URLに指定されたIDの記事が microCMSに存在するとは限りません。

取得処理で404を判定する例

import { notFound } from "next/navigation";
import { client } from "@/libs/microcms";

async function getArticle(id: string) {
  try {
    return await client.get({
      endpoint: "blogs",
      contentId: id,
    });
  } catch {
    return null;
  }
}

export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  const article = await getArticle(id);

  if (!article) {
    notFound();
  }

  return (
    <article>
      <h1>{article.title}</h1>
    </article>
  );
}

not-found.tsxを置く場所

not-found.tsxは、 appフォルダーのルートだけでなく、 特定のルートセグメント内にも配置できます。

近いルートセグメントにあるnot-foundファイルを使うことで、 ブログ用、商品用など、 コンテンツに合った案内を表示できます。

セグメントごとに404画面を変える

サイト全体の404と、 ブログ記事が見つからない場合では、 ユーザーに案内したい内容が異なります。

import Link from "next/link";

export default function BlogNotFound() {
  return (
    <main>
      <p>404</p>

      <h1>
        お探しの記事は見つかりませんでした
      </h1>

      <p>
        記事が削除されたか、
        URLが変更された可能性があります。
      </p>

      <Link href="/blog">
        記事一覧を見る
      </Link>
    </main>
  );
}

存在しないURLとnotFound()の違い

404が表示される場面は、 大きく2種類に分けられます。

Next.jsには、通常のnot-foundファイルに加え、 アプリ全体で一致しないURLを処理するための global-not-found.jsという仕組みもあります。

error.tsxとの違い

404ページとエラーページは、 どちらも通常のページを表示できないときに使います。

ただし、意味は異なります。

404ページに入れたい内容

404ページは、 「見つかりませんでした」と伝えるだけでなく、 ユーザーがサイト内で迷わないように案内します。

404ページの実装例

import Link from "next/link";

export default function NotFoundPage() {
  return (
    <main className="not-found">
      <p className="not-found__number">
        404
      </p>

      <h1>
        お探しのページは見つかりませんでした
      </h1>

      <p>
        URLをご確認いただくか、
        以下のリンクから目的のページをお探しください。
      </p>

      <div className="not-found__links">
        <Link href="/">
          トップページへ戻る
        </Link>

        <Link href="/blog">
          記事一覧を見る
        </Link>
      </div>
    </main>
  );
}

よくあるつまずき

import { notFound } from "next/navigation";

if (!article) {
  notFound();
}

<Link href="/">
  トップページへ戻る
</Link>