एक लेआउट हा सामायिक UI आहे जो अनेक पृष्ठांना गुंडाळतो आणि नेव्हिगेशन भर स्थायी रहतो — जेव्हा तुम्ही चाइल्ड रूट्स मध्ये जाता तेव्हा ते पुन्हा रेंडर होत नाही किंवा स्थिती गमावत नाही. तुम्ही एक layout.tsx फाइल सह परिभाषित करता.
() {
(
);
}
प्रत्येक App Router अ्यापमध्ये रूट लेआउट असणे आवश्यक आहे — ते जुने _app.tsx/_document.tsx बदलते.
लेआउट्स फोल्डर संरचनेच्या बरोबर नेस्ट होतात, म्हणून प्रत्येक विभाग आपना स्वतःचा कायम रहणारा रॅपर जोडू शकतो:
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>
);
}
जेव्हा तुम्ही /dashboard/settings वरून /dashboard/billing कडे नेव्हिगेट करता, तेव्हा डॅशबोर्ड लेआउट (आणि त्याचे <Sidebar>) माउंट राहतात — त्याची स्थिती (स्क्रोल पोजिशन, खुली मेन्यू, फॉर्म इनपुट) संरक्षित केली जाते, आणि केवळ पृष्ठ सामग्री बदलते. हे संपूर्ण शेल पुन्हा रेंडर करण्यापेक्षा अधिक कार्यक्षम आहे आणि अधिक गुळगुळीत UX देते.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
दुर्लभ प्रसंगी जेव्हा तुम्हाला हवे असे की रॅपर प्रत्येक नेव्हिगेशनसाठी रीसेट व्हावा, तेव्हा layout.tsx ऐवजी template.tsx वापरा.
लेआउट्स हे असे आहे की App Router सामायिक, कायम UI (हेडर, साइडबार, नॅव) रूट ट्रीच्या कोणत्याही स्तरावर कसे मॉडेल करतो.
नेव्हिगेशन भर त्यांची स्थायित्व — स्थिती संरक्षित करणे आणि शेलची पुन्हा रेंडरिंग टाळणे — हे App Router चा मुख्य लाभ आहे, आणि नेस्टेड लेआउट्स प्रत्येक विभागाला स्वच्छपणे आपला स्वतःचा संरचना तयार करण्यास अनुमती देतात.