Si funksionon rutimi i bazuar në skedarë në App Router?

Question

Accepted Answer

Në App Router, **struktura e dosjeve brenda `app/` përcakton rutërat tuaja** — nuk ka konfigurim rutjeje për të shkruar. Çdo dosje është një segment URL, dhe skedarë të veçantë brenda saj përcaktojnë se çfarë do të renderohet në atë segment. ## Dosjat = segmente 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) ``` ## Skedarët e veçantë Çdo dosje mund të përmbajë emra të skedarëve të rezervuar, secili me një rol specifik: ```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) ``` ## Segmentet dinamike ```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" } ``` Okt trigerat e vendosin një parametër dinamik që kaloi në faqe përmes `params`. Variacionet: `[...slug]` (kap-të gjitha), `[[...slug]]` (kap-të gjitha opsionale). ## Grupet e rutave dhe organizimi ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` Parantezat e vendosin **grupet e rutave** për të organizuar skedarët ose për të zbatuar ndarje të ndryshme pa ndikuar URL-në. ## Pse është i rëndësishëm Rutimi i bazuar në skedarë e bën strukturën e URL-it të dukshme nga pema e skedarëve — nuk ka konfigurim të rutës qendrore për të ruajtur dhe mbajtur në sinkron. Përfshirja e emrave të veçantë të skedarëve (`page`, `layout`, `loading`, `error`, `route`) dhe konventa e okteve (`[param]`, `[...catchAll]`, `(group)`) është fjalori themelor i ndërtimit të çdo aplikacioni App Router.