Bagaimana cara kerja perutean berbasis file di App Router?

Question

Accepted Answer

Di App Router, **struktur folder di dalam `app/` mendefinisikan rute Anda** — tidak ada konfigurasi router yang perlu ditulis. Setiap folder adalah segmen URL, dan file khusus di dalamnya mendefinisikan apa yang ditampilkan 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) ``` ## File-file khusus Setiap folder dapat berisi nama file yang dicadangkan, masing-masing dengan peran 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" } ``` Tanda kurung siku membuat parameter dinamis yang dilewatkan ke halaman melalui `params`. Variasi: `[...slug]` (catch-all), `[[...slug]]` (catch-all opsional). ## Grup rute dan organisasi ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` Tanda kurung membuat **grup rute** untuk mengorganisir file atau menerapkan layout berbeda tanpa memengaruhi URL. ## Mengapa ini penting Perutean berbasis file membuat struktur URL jelas dari pohon file — tidak ada konfigurasi rute pusat yang perlu dipertahankan dan disinkronkan. Mengetahui nama file khusus (`page`, `layout`, `loading`, `error`, `route`) dan konvensi kurung (`[param]`, `[...catchAll]`, `(group)`) adalah kosa kata inti untuk membangun aplikasi App Router apa pun.