notFoundで404にする｜基礎を学ぶ

無い商品を開かれたとき

/items/999 のように、存在しない id で開かれることは必ず起こります。売り切れて取り下げた商品の URL が、誰かのブックマークに残っているからです。

いまの詳細ページは、取得に失敗しても何も判定していません。商品名の場所が空欄になったページが出るだけです。これは見た目が壊れているだけでなく、検索エンジンに「中身のあるページ」として登録されてしまいます。

Next.js には、その場で表示をやめて404扱いに切り替える関数があります。

import { notFound } from "next/navigation";

const res = await fetch(`/api/items/${id}`);
if (!res.ok) {
  notFound();
}

notFound() は値を返しません。呼んだ時点でそのページの描画が打ち切られます。だから return を付ける必要はありませんし、そのあとの行が動くこともありません。

打ち切ったあとに何を出すかは app/not-found.tsx に書きます。page.tsx や layout.tsx と同じく、名前が決まっているファイルです。

置いた階層から下のページ全部に効きます。app/not-found.tsx に1つ置けば、サイト全体の404画面になります。商品の一覧に戻るリンクを添えておくと、行き止まりになりません。

存在しない id のときに notFound() を呼び、404の画面を出します。