IT-Q

「見つからない」ときの表示は、どう作りますか。

not-found.tsx を置きます。画面が出るだけでなく、HTTPのステータスとしても404で返せる点が要点です。自前でメッセージを出すだけだと200のまま返り、監視でも区別できません。

面接官が見ているのはnot-found の存在。

これは「あるコンポーネントで例外が出たら、ページ全体が真っ白になりました。どうしますか。」への追撃質問です。

よくある答えと、面談でどう見られるか

  • not-found.tsx を置く。404 として返せるのが利点
    ステータスまで正しく返せる点が、自前でメッセージを出すのとの違いです。
  • データが無ければメッセージを表示するコンポーネントを書く
    画面は作れますが、ステータスは 200 のままです。存在しない URL が 200 で返り続けると、検索エンジンに登録されてしまいます。
  • 例外を投げて error.tsx で拾う
    動きますが、「見つからない」は想定内の状態なので、専用の仕組みを使う方が素直です。監視上も 500 と区別できます。
  • トップページへリダイレクトする
    利用者は何が起きたか分かりませんし、間違ったURLに気づけません。検索エンジンにも誤った情報が伝わります。

面接官は何を見ているか

  • not-found.tsx を挙げた
  • 例外として投げるのではなく専用の仕組みがあると知っている
  • 404 として返る点に触れた

模範解答

not-found.tsx を置いて、該当データが無いときにその表示へ切り替えます。

これを使う利点は、単に画面が出るだけでなく、HTTP のステータスとしても「見つからない」で返せることです。検索エンジンに正しく伝わりますし、監視で 500 と区別できます。

自前で「データが無ければメッセージを出す」と書いても画面は作れますが、その場合ステータスは 200 のままです。存在しないURLが 200 で返り続けると、インデックスの汚染につながります。