notFoundの使い方：存在しないデータを専用画面へ切り替える
notFoundで存在しない記事や商品を扱う方法を説明します。not-found.tsxとの組み合わせ、通信障害との区別、HTTP応答の確認まで学びます。
notFoundで存在しない記事や商品を扱う方法を説明します。not-found.tsxとの組み合わせ、通信障害との区別、HTTP応答の確認まで学びます。
対象環境と役割
App Routerで使う機能
この記事のApp Routerの例はNext.js 15以降の非同期リクエストAPIに合わせた書き方です。Next.js 16ではCache Componentsを有効にしない構成を前提とします。Pages Routerの記事とは配置先・実行場所が異なるため、プロジェクトのルーターとバージョンを先に確認してください。
TypeScriptの例は5.2以降と、利用するNext.jsが対応するNode.jsを前提にします。app/layout.tsx を備えたApp Routerプロジェクトで実行してください。
引数・戻り値・受け渡すデータ
notFound() は現在のルートセグメントの描画を終了する制御を発生させます。単にfalseを返す関数ではありません。対応する not-found.tsx で案内画面を定義できます。
コード例を動かす
app/lookup/[slug]/page.tsx を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
import { notFound } from 'next/navigation';
const titles: Record<string, string> = { react: 'Reactの学習記録' };
export default async function Lookup({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params;
if (!Object.hasOwn(titles, slug)) notFound();
return <main><h1>{titles[slug]}</h1></main>;
}実行結果と処理の順序
/lookup/react は記事を表示し、/lookup/missing は見つからない状態として扱われます。独自の案内は app/lookup/[slug]/not-found.tsx にdefault exportのReactコンポーネントとして追加できます。
CMSを使う場合は「記事がない」と「通信に失敗した」を分けます。APIの500やタイムアウトをすべて404扱いにすると、障害が記事削除に見えてしまいます。
つまずきやすい点と使い分け
画面とステータスを別々に確認
Next.jsはnotFoundに対応するnoindex情報を付与しますが、ストリーミング開始後のnot-found表示ではHTTP 200になる場合があります。画面の文言だけで404応答を確認したことにしないでください。
戻り値を期待しない
notFoundの後へ処理を続ける設計にせず、存在確認後の正常系を読みやすく並べます。この例の Object.hasOwn はES2022対応環境が必要です。
静的出力で使えるか
この動的サンプルをそのまま静的出力することはできません。generateStaticParams で対象URLを列挙する構成へ変更し、未生成URLは配信サーバーで404にします。
確認課題と実務への応用
自分で値を変えて確認する
not-found.tsxへ一覧へのLinkを追加し、未知のslugでも読者が迷わず戻れるか確認します。CMS障害のときには別のエラー表示・監視へつながる設計も考えてください。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。