App Routerではファイルベースのルーティングはどのように機能しますか？

Question

IT Interview Practice · Accepted Answer

App Routerでは、`app/`内の**フォルダ構造がルートを定義します**。ルータ設定を書く必要がありません。各フォルダはURLセグメントであり、その中の特別なファイルがそのセグメントで何をレンダリングするかを定義します。 ## フォルダ = URLセグメント ```text app/ page.tsx → / about/page.tsx → /about blog/page.tsx → /blog blog/[slug]/page.tsx → /blog/:slug (dynamic segment) shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL) ``` ## 特別なファイル各フォルダには予約済みファイル名を含めることができ、それぞれが特定の役割を持ちます： ```text page.tsx → the route's UI (REQUIRED to make a segment routable) layout.tsx → shared wrapper that persists across child routes loading.tsx → loading UI (auto-wraps the page in ) error.tsx → error boundary for the segment not-found.tsx→ 404 UI route.ts → an API endpoint (instead of a page) ``` ## 動的セグメント ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default function Post({ params }: { params: { slug: string } }) { return

Post: {params.slug}

; // params.slug = "hello" } ``` 角括弧は、`params`を通じてページに渡される動的パラメータを作成します。バリエーション：`[...slug]`（キャッチオール）、`[[...slug]]`（オプションキャッチオール）。 ## ルートグループと編成 ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` 括弧は**ルートグループ**を作成して、ファイルを整理したり、URLに影響を与えずに異なるレイアウトを適用したりできます。 ## なぜ重要なのかファイルベースのルーティングにより、URL構造がファイルツリーから明らかになります。中央のルート設定を保守して同期させておく必要がありません。特別なファイル名（`page`、`layout`、`loading`、`error`、`route`）と括弧の規則（`[param]`、`[...catchAll]`、`(group)`）を知ることは、App Routerアプリを構築するための主要な語彙です。

フォルダ = URLセグメント

特別なファイル

動的セグメント

ルートグループと編成

なぜ重要なのか

関連する質問