App Router में फाइल-आधारित राउटिंग कैसे काम करती है?

Question

Accepted Answer

App Router में, **`app/` के अंदर फोल्डर संरचना आपकी routes को परिभाषित करती है** — कोई router config लिखने की आवश्यकता नहीं है। प्रत्येक फोल्डर एक URL segment है, और इसके अंदर की विशेष फाइलें परिभाषित करती हैं कि वह segment क्या render करता है। ## फोल्डर्स = URL segments ```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) ``` ## विशेष फाइलें प्रत्येक फोल्डर में आरक्षित फाइल नाम हो सकते हैं, प्रत्येक की एक विशिष्ट भूमिका है: ```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) ``` ## Dynamic segments ```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" } ``` वर्गाकार कोष्ठक एक dynamic parameter बनाते हैं जो `params` के माध्यम से page को पास किया जाता है। विविधताएं: `[...slug]` (catch-all), `[[...slug]]` (optional catch-all)। ## Route groups और संगठन ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` कोष्ठक **route groups** बनाते हैं फाइलों को संगठित करने या विभिन्न layouts लागू करने के लिए बिना URL को प्रभावित किए। ## यह क्यों महत्वपूर्ण है फाइल-आधारित राउटिंग URL संरचना को फाइल ट्री से स्पष्ट बनाती है — कोई केंद्रीय route configuration को maintain और sync रखना नहीं है। विशेष फाइल नामों (`page`, `layout`, `loading`, `error`, `route`) और bracket सम्मेलनों (`[param]`, `[...catchAll]`, `(group)`) को जानना किसी भी App Router app बनाने की मूल शब्दावली है।