Kif taħdem l-għalija bbażata fuq il-fajls (file-based routing) fl-App Router?

Question

Accepted Answer

Fl-App Router, **l-istruttura tal-folders ġewwa `app/` tiddefinisci l-roti tiegħek** — m'hemmx bżonn tikteb il-konfigurazzjoni tal-router. Kull folder hija segment URL, u l-fajls speċjali ġewwaha jiddefinixu x'jirriżulta minn dak is-segment. ## Folders = segments 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) ``` ## Il-fajls speċjali Kull folder tista' tikkontina ismijiet ta' fajls riservati, kull wieħed b'rolu speċifiku: ```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) ``` ## Segments dinamiċi ```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" } ``` Il-parentesi kwadri jiffurmaw parametru dinamiku li jgħaddu il-paġna permezz ta' `params`. Varjazzjonijiet: `[...slug]` (catch-all), `[[...slug]]` (optional catch-all). ## Gruppi ta' roti u organizzazzjoni ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` Il-parentesi tond jiffurmaw **gruppi ta' roti** biex jorganizzaw il-fajls jew japplikaw layouts differenti mingħajr ma jaffettwaw l-URL. ## Għaliex dan importanti L-għalija bbażata fuq il-fajls tagħmel l-istruttura tal-URL ċara mill-ħamra tal-fajl — m'hemm l-ebda konfigurazzjoni ta' rota ċentrali li trid titkejjel u ttieħed sinkroniżata. L-għarfien ta' l-ismijiet ta' fajls speċjali (`page`, `layout`, `loading`, `error`, `route`) u l-konvenzjonijiet tal-parentesi (`[param]`, `[...catchAll]`, `(group)`) hija l-vokabularrju essenzjali għal bini ta' kwalunkwe applikazzjoni ta' App Router.