結論

• Next.js（特に App Router）は、ファイル名 + ディレクトリ配置で役割が決まる設計です。
• そのため「この名前で置くと効く」が基本になります。

よく使う特殊ファイル

ファイル名	役割
page.tsx	そのセグメントのページ
layout.tsx	共通レイアウト
loading.tsx	読み込み中UI
error.tsx	エラーUI
not-found.tsx	404 UI
route.ts	API Route Handler
middleware.ts	リクエスト前段の共通処理

どこで効くか

• page.tsx などは、置いたディレクトリ（ルートセグメント）配下に効きます。
• middleware.ts はプロジェクトルートで特別扱いされ、config.matcher で対象パスを絞ります。

関数名との関係

• 多くのケースで、関数名は任意（default export されていれば動く）。
• ただし、以下のような 名前付き export は名前自体に意味があります。
  • generateMetadata
  • generateStaticParams
  • revalidate
  • dynamic
  • runtime

ベストプラクティス

• ファイル構成だけで意図が伝わるように、特殊ファイル名を正しく使い分ける。
• middleware.ts は毎リクエストに関わるため、重い処理・外部I/Oを避ける。
• セグメント単位で not-found.tsx / error.tsx を分け、文脈に合うUIを出す。

学習リソース

• App Router file conventions
  https://nextjs.org/docs/app/api-reference/file-conventions
• Route Segment Config
  https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
• Middleware
  https://nextjs.org/docs/app/building-your-application/routing/middleware