「見つからない」ときの表示は、どう作るのが適切ですか。
not-found.tsx を置き notFound() を呼びます。ストリーミング前なら404で返せる点が要点です。返し始めた後は200のまま noindex が付きます。自前のメッセージだけでは200のままです。
面接官が見ているのは404 をステータスとして返せるか。自前実装だと 200 のままになる。
よくある答えと、面談でどう見られるか
- not-found.tsx を置く。HTTP のステータスも 404 で返せる
自前でメッセージを出すのとの違いは、ステータスまで正しく返せる点です。 - データが無ければメッセージを表示するコンポーネントを書く
画面は作れますが、ステータスは 200 のままです。存在しないURLがインデックスされます。 - トップページへリダイレクトする
利用者は何が起きたか分からず、検索エンジンにも誤った情報が伝わります。 - error.tsx で拾って「見つかりません」と出す
動きますが、想定内の状態なので専用の仕組みを使う方が素直です。監視上も 500 と区別できます。
模範解答
not-found.tsx を置き、該当データが無いときに notFound() を呼んでその表示へ切り替えます。
利点は、画面が出るだけでなく HTTP のステータスとしても「見つからない」で返せることです。検索エンジンに正しく伝わりますし、監視で 500 と区別できます。
ただし 404 になるのは、ストリーミングが始まる前に notFound() を呼んだ場合です。loading.tsx や Suspense で先に返し始めていると、ステータスは 200 のままになり、代わりに noindex のメタタグが入ります。404 を確実に返したいなら、データの有無の確認を返し始める前に済ませます。
自前で「データが無ければメッセージを出す」と書いても画面は作れますが、その場合ステータスは 200 のままです。存在しないURLが 200 で返り続けると、インデックスの汚染につながります。
対象: Next.js 16（App Router） 照合した一次資料: 公式ドキュメント 照合: 2026-10-25 最終更新: 2026-10-25
お使いの版で挙動が違う場合があります。誤りに気づいたらこの解説を報告するから教えてください。