notFoundで404にする
無い商品を開かれたとき
/items/999 のように、存在しない id で開かれることは必ず起こります。売り切れて取り下げた商品の URL が、誰かのブックマークに残っているからです。
いまの詳細ページは、取得に失敗しても何も判定していません。商品名の場所が空欄になったページが出るだけです。これは見た目が壊れているだけでなく、検索エンジンに「中身のあるページ」として登録されてしまいます。
notFound を呼ぶ
Next.js には、その場で表示をやめて404扱いに切り替える関数があります。
TypeScript (JSX)
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の画面を出します。