एक layout साझा UI है जो कई पृष्ठों को लपेटता है और नेविगेशन के दौरान बना रहता है — जब आप चाइल्ड रूट्स के बीच जाते हैं तो यह फिर से render नहीं होता है और अपनी स्थिति नहीं खोता है। आप इसे layout.tsx फाइल से परिभाषित करते हैं।
The root layout (required)
// app/layout.tsx — wraps EVERY page; must include <html> and <body>
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Header />
{children} {/* the active page renders here */}
<Footer />
</body>
</html>
);
}
प्रत्येक App Router ऐप के पास एक root layout होना आवश्यक है — यह पुरानी _app.tsx/_document.tsx की जगह लेता है।
Nested layouts
Layouts फोल्डर संरचना के साथ नेस्ट करते हैं, इसलिए प्रत्येक सेक्शन अपना स्वयं का स्थायी wrapper जोड़ सकता है:
app/layout.tsx → wraps everything (header/footer)
app/dashboard/layout.tsx → wraps all /dashboard/* pages (adds a sidebar)
app/dashboard/settings/page.tsx → rendered inside BOTH layouts
// app/dashboard/layout.tsx — only wraps dashboard routes
export default function DashboardLayout({ children }) {
return (
<div className="flex">
<Sidebar /> {/* stays mounted as you move within /dashboard */}
<main>{children}</main>
</div>
);
}
Why persistence matters
जब आप /dashboard/settings से /dashboard/billing पर नेविगेट करते हैं, तो dashboard layout (और इसका <Sidebar>) माउंटेड रहता है — इसकी स्थिति (स्क्रॉल पोजीशन, खुले मेनू, फॉर्म इनपुट) सुरक्षित रहती है, और केवल पेज कंटेंट बदलता है। यह संपूर्ण shell को फिर से render करने की तुलना में अधिक कुशल है और एक चिकना UX देता है।
Layout vs template
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
template.tsx का उपयोग layout.tsx की जगह करें दुर्लभ मामलों में जब आप चाहते हैं कि wrapper प्रत्येक नेविगेशन पर रीसेट हो।
यह क्यों महत्वपूर्ण है
Layouts वह तरीका है जिससे App Router साझा, स्थायी UI (हेडर, साइडबार, nav) को रूट ट्री के किसी भी स्तर पर मॉडल करता है।
नेविगेशन के दौरान उनकी स्थिरता — state को संरक्षित करना और shell को फिर से render करने से बचना — यह App Router का मुख्य लाभ है, और नेस्टेड layouts प्रत्येक सेक्शन को अपनी संरचना को स्वच्छता से compose करने देते हैं।