Katika App Router, muundo wa kabrasha ndani ya app/ unabainisha njia zako — hakuna usanidi wa router wa kuandika. Kila kabrasha ni sehemu ya URL, na faili maalum ndani yake hufafanua kile ambacho hiyo sehemu inarejea.
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)
Kila kabrasha inaweza kuwa na majina ya faili yaliyohifadhiwa, kila mmoja akiwa na jukumu maalum:
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 <Suspense>)
error.tsx → error boundary for the segment
not-found.tsx→ 404 UI
route.ts → an API endpoint (instead of a page)
// app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything
export default function Post({ params }: { params: { slug: string } }) {
return <h1>Post: {params.slug}</h1>; // params.slug = "hello"
}
Mabano ya mraba huundwa kigezo kinachobadilika kinachopitishwa kwenye ukurasa kupitia params. Tofauti: [...slug] (kosa-yote), [[...slug]] (kosa-yote la hiari).
app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL)
Mabano ya duara huundwa vikundi vya njia kuandaa faili au kutumia mipango tofauti bila kuathiri URL.
Uongezaji wa faili unafanya muundo wa URL uwazi kutoka kwa mti wa faili — hakuna usanidi wa njia ya kati unaoendela kudumisha na kuweka katika sinkronaizo.
Kujua majina maalum ya faili (page, layout, loading, error, route) na makubaliano ya mabano ya mraba ([param], [...catchAll], (group)) ni msingi wa kina wa kujenga programu yoyote ya App Router.