Next.js not-found.tsx 仕様メモ

結論

• not-found.tsx は ファイル名で判定される Next.js App Router の特殊ファイルです。
• default export されたコンポーネントが 404 UI として使われます。
• 関数名（例: ManagerCourseNotFound）は任意です。

いつ使われるか

• 対象セグメント配下で notFound() が呼ばれたとき。
• そのルートで 404 扱いになったとき。

優先順位（どの not-found.tsx が使われるか）

• 下位（より近いセグメント）の not-found.tsx が優先される。
• 近い not-found.tsx がなければ親セグメントへフォールバックする。
• 最終的には app/not-found.tsx が使われる。

今回の例では、以下配下で有効です。

• frontend/src/app/manager/groups/[groupId]/certifications/[certificationId]/[courseId]/not-found.tsx

現在の実装の役割

• 共通の ~/app/not-found を返して 404 画面を表示する。
• 開発環境のみ、headers() から URL や referer などをログ出力して調査しやすくする。

ベストプラクティス

• 404 表示はできるだけ軽くする（不要な重い処理を入れない）。
• 本番ログは最小限にし、詳細ログは開発時に限定する。
• セグメントごとに not-found.tsx を置き、文脈に合う案内文にする。

学習リソース

• Next.js Docs: App Router の not-found.js / notFound() の仕様
  • https://nextjs.org/docs/app/api-reference/file-conventions/not-found
  • https://nextjs.org/docs/app/api-reference/functions/not-found