App Router मध्ये, app/ फोल्डरच्या संरचना आपल्या मार्गांची व्याख्या करते — कोणताही राउटर कॉन्फिगरेशन लिहिण्याची आवश्यकता नाही। प्रत्येक फोल्डर एक URL सेगमेंट आहे, आणि त्यातील विशेष फाइलें त्या सेगमेंटच्या रेंडरिंग परिभाषित करते।
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]] (optional catch-all).
app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL)
कंस मार्ग गट तयार करते ज्यामुळे फाइलांची संघटना करणे किंवा URL प्रभावित न करता वेगवेगळ्या लेआउट लागू करणे शक्य होते।
फाइल-आधारित रूटिंग URL संरचना फाइल ट्रीतून स्पष्ट करते — कोणताही केंद्रीय राउटर कॉन्फिगरेशन ठेवण्याची आणि सिंक्रोनाइজ करण्याची आवश्यकता नाही।
विशेष फाइलनावें (page, layout, loading, error, route) आणि कंस नियम ([param], [...catchAll], (group)) जाणून घेणे हे कोणत्याही App Router अॅप तयार करण्याचे मुख्य शब्दसंग्रह आहे।