ایک layout وہ shared UI ہے جو متعدد pages کو wrap کرتا ہے اور navigation کے دوران برقرار رہتا ہے — یہ child routes کے درمیان منتقل ہوتے وقت دوبارہ render نہیں ہوتا یا state نہیں کھوتا۔ آپ اسے layout.tsx فائل کے ساتھ define کرتے ہیں۔
() {
(
);
}
ہر App Router app کے پاس لازمی طور پر ایک root layout ہونا چاہیے — یہ پرانے _app.tsx/_document.tsx کی جگہ لیتا ہے۔
Layouts folder structure کے ساتھ nest ہوتے ہیں، تو ہر section اپنا persistent 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>
);
}
جب آپ /dashboard/settings سے /dashboard/billing میں navigate کرتے ہیں، تو dashboard layout (اور اس کا <Sidebar>) mounted رہتا ہے — اس کی state (scroll position, کھلے menus, form input) محفوظ رہتے ہیں، اور صرف page content بدلتا ہے۔ یہ پورے shell کو دوبارہ render کرنے سے زیادہ موثر ہے اور بہتر UX فراہم کرتا ہے۔
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
template.tsx کو layout.tsx کی جگہ استعمال کریں اگر آپ کو نادر موقع پر یہ چاہتے ہوں کہ wrapper navigation per reset ہو۔
Layouts اس طرح ہیں جس طرح App Router shared, persistent UI (headers, sidebars, nav) کو route tree کے کسی بھی level پر model کرتا ہے۔
Navigation کے دوران ان کی persistence — state کو محفوظ رکھنا اور shell کے re-renders سے بچنا — ایک core App Router فائدہ ہے، اور nested layouts ہر section کو اپنی structure صاف ستھرے طریقے سے compose کرنے دیتے ہیں۔