「見つからない」ときの表示は、どう作りますか。
not-found.tsx を置き notFound() を呼びます。ストリーミング前なら404で返せる点が要点で、返し始めた後は200のまま noindex が付きます。自前のメッセージだけでは200のままです。
面接官が見ているのはnot-found の存在。
これは「あるコンポーネントで例外が出たら、ページ全体が真っ白になりました。どうしますか。」への追撃質問です。
よくある答えと、面談でどう見られるか
- not-found.tsx を置く。404 として返せるのが利点
ステータスまで正しく返せる点が、自前でメッセージを出すのとの違いです。ただし 404 になるのはストリーミング開始前に notFound() を呼んだ場合で、返し始めた後は 200 のまま noindex が付きます。 - データが無ければメッセージを表示するコンポーネントを書く
画面は作れますが、ステータスは 200 のままです。存在しない URL が 200 で返り続けると、検索エンジンに登録されてしまいます。 - 例外を投げて error.tsx で拾う
動きますが、「見つからない」は想定内の状態なので、専用の仕組みを使う方が素直です。監視上も 500 と区別できます。 - トップページへリダイレクトする
利用者は何が起きたか分かりませんし、間違ったURLに気づけません。検索エンジンにも誤った情報が伝わります。
面接官は何を見ているか
- not-found.tsx を挙げた
- 例外として投げるのではなく専用の仕組みがあると知っている
- 404 として返る点に触れた
模範解答
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
お使いの版で挙動が違う場合があります。誤りに気づいたらこの解説を報告するから教えてください。