Bagaimanakah penghalaan berbasis fail (file-based routing) berfungsi di App Router?

Question

Accepted Answer

Dalam App Router, **struktur folder di dalam `app/` menentukan rute Anda** — tidak perlu menulis konfigurasi router. Setiap folder adalah segmen URL, dan file-file khusus di dalamnya menentukan apa yang dirender oleh segmen tersebut. ## Folder = segmen 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) ``` ## Fail-fail khusus Setiap folder dapat mengandung nama fail yang dicadangkan, masing-masing dengan peranan tertentu: ```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) ``` ## Segmen dinamis ```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" } ``` Kurung segi empat mencipta parameter dinamis yang dihantar ke halaman melalui `params`. Variasi: `[...slug]` (catch-all), `[[...slug]]` (optional catch-all). ## Kumpulan rute & organisasi ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` Kurung bundar mencipta **kumpulan rute** untuk mengorganisir fail atau menerapkan tata letak berbeza tanpa menjejaskan URL. ## Mengapa ini penting Penghalaan berbasis fail menjadikan struktur URL jelas daripada pepohon fail — tiada konfigurasi rute pusat yang perlu dikekalkan dan disegerakkan. Mengetahui nama fail khusus (`page`, `layout`, `loading`, `error`, `route`) dan konvensi kurung (`[param]`, `[...catchAll]`, `(group)`) adalah perbendaharaan kata asas untuk membina mana-mana aplikasi App Router.