App Router માં, app/ ની અંદર ફોલ્ડર સ્ટ્રક્ચર તમારી routes નિર્ધારિત કરે છે — લખવાની કોઈ router config નથી. દરેક ફોલ્ડર એક URL segment છે, અને તેની અંદરની વિશેષ ફાઇલો તે segment શું રેન્ડર કરે છે તે વ્યાખ્યાયિત કરે છે.
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)
પ્રત્યેક ફોલ્ડર આરક્ષિત ફાઇલનામ ધરાવી શકે છે, દરેક એક ચોક્કસ ભૂમિકા સાથે:
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"
}
ચોરસ કૌંસ એક ગતિશીલ પરિમાણ બનાવે છે જે params મારફતે પૃષ્ઠમાં પસાર કરવામાં આવે છે. ભિન્નતા: [...slug] (catch-all), [[...slug]] (વૈકલ્પિક catch-all).
app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL)
વર્તુળાકાર કૌંસ route જૂથો બનાવે છે ફાઇલો સંગઠિત કરવા અથવા વિવિધ layouts લાગુ કરવા બિના URL ને અસર કર્યા.
ફાઇલ-આધારિત રૂટીંગ URL સ્ટ્રક્ચર ફાઇલ ટ્રીથી સ્પષ્ટ બનાવે છે — કોઈ કેન્દ્રીય route configuration જાળવી રાખવું અને સમન્વયમાં રાખવું હોતું નથી.
વિશેષ ફાઇલનામો (page, layout, loading, error, route) અને bracket સંમેલનો ([param], [...catchAll], (group)) જાણવું એ કોઈપણ App Router app બનાવવાની મૂળ શબ્દાવલી છે.