App Router میں file-based routing کیسے کام کرتی ہے؟

Question

Accepted Answer

App Router میں، **`app/` کے اندر folder structure آپ کے routes کو define کرتی ہے** — کوئی router config لکھنے کی ضرورت نہیں۔ ہر folder ایک URL segment ہے، اور اس کے اندر special files اس segment کو render کرنے کے لیے کیا کرتی ہے یہ define کرتی ہیں۔ ## Folders = 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) ``` ## Special files ہر folder میں reserved filenames ہو سکتی ہیں، ہر ایک کا ایک مخصوص کردار ہے: ```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" } ``` Square brackets ایک dynamic parameter بناتے ہیں جو page تک `params` کے ذریعے pass ہوتا ہے۔ Variations: `[...slug]` (catch-all)، `[[...slug]]` (optional catch-all)۔ ## Route groups & organization ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` Parentheses **route groups** بناتے ہیں تاکہ files کو organize کریں یا مختلف layouts apply کریں بغیر URL کو متاثر کیے۔ ## یہ کیوں اہم ہے File-based routing URL structure کو file tree سے واضح کرتی ہے — کوئی central route configuration maintain اور sync میں رکھنے کی ضرورت نہیں۔ Special filenames (`page`، `layout`، `loading`، `error`، `route`) اور bracket conventions (`[param]`، `[...catchAll]`، `(group)`) کو جاننا App Router app بنانے کی core vocabulary ہے۔