App Router मा फाइल-आधारित रूटिङ कसरी काम गर्छ?

Question

Accepted Answer

App Router मा, **`app/` भित्रको फोल्डर संरचना आपनको रुटहरू परिभाषित गर्छ** — त्यहाँ कोनो रूटर कन्फिगुरेशन लेख्न आवश्यक छैन। प्रत्येक फोल्डर एक URL सेगमेन्ट हो, र यसको भित्रको विशेष फाइलहरूले परिभाषित गर्छ कि त्यो सेगमेन्टले के रेन्डर गर्छ। ## फोल्डरहरू = 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) ``` ## विशेष फाइलहरू प्रत्येक फोल्डरमा आरक्षित फाइलनामहरू हुन सक्छन्, प्रत्येकको विशिष्ट भूमिका छ: ```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) ``` ## गतिशील सेगमेन्टहरू ```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" } ``` वर्गाकार कोष्ठकहरूले `params` को माध्यमबाट पृष्ठमा पारित गतिशील प्यारामिटर बनाउँछ। भिन्नताहरू: `[...slug]` (पक्ड-सबै), `[[...slug]]` (वैकल्पिक पक्ड-सबै)। ## रुट समूहहरू र संगठन ```text 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 अनुप्रयोग बनाउनको मूल शब्दावली हो।