App Router Basics
app/ folder, ke, ANDAR, HAR, SUBFOLDER, EK, URL, SEGMENT, REPRESENT, karta hai — jaise, app/about/page.js, /about, ROUTE, banaता, hai. page.js, file, WOH, COMPONENT, hai, JO, US, ROUTE, PAR, RENDER, hota hai.
layout.js, SHARED, UI, DEFINE, karta hai, JO, MULTIPLE, pages, ke, BEECH, PERSIST, karta hai (jaise, NAVIGATION, sidebar) — page, navigate, karne, PAR, layout, RE-RENDER, NAHI, hota.
app/
├── page.js → /
├── about/
│ └── page.js → /about
└── blog/
├── page.js → /blog
└── [slug]/
└── page.js → /blog/:slug- app/ folder structure = URL structure
- page.js = us route par, render, hone, waala, component
- layout.js = shared UI, jo, pages, ke, beech, persist, karta, hai
Pages, Router, (pages/ folder) Next.js, ka, PURANA, ROUTING, system, hai — App, Router, (app/ folder) NAYA, aur, RECOMMENDED, system, hai, Server, Components, nested, layouts, aur, streaming, jaise, features, ke, saath.
app/ folder, ke, ANDAR, page.js, ke, SAATH, HI, components, tests, aur, styles, "colocate" (SAME, folder, mein, rakhi) ki, ja, sakti, hain — kyunki, sirf, page.js, layout.js, JAISE, SPECIFIC, files, hi, PUBLICLY, routable, HAIN.
app/dashboard/
├── page.js
├── Chart.js ← colocated component
└── Chart.test.js ← colocated test