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 అనువర్తనాన్ని నిర్మించడానికి ప్రధాన పదకోశం.