Nested Layouts
Root, layout.js, (app/layout.js) MANDATORY, hai — <html> aur, <body>, tags, ISI, mein, DEFINE, HOTE, HAIN. HAR, NESTED, folder, ka, apna, layout.js, ho, sakta hai, JO, PARENT, layout, ke, ANDAR, NEST, hota hai.
Layouts, RE-RENDER, NAHI, HOTE, jab, USER, EK, SIBLING, page, PAR, NAVIGATE, karta hai — sirf, page.js, ka, CONTENT, CHANGE, hota hai, JO, layout, ki, PERFORMANCE, ADVANTAGE, hai.
// app/layout.js (root — MANDATORY):
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav>...</nav>
{children}
</body>
</html>
);
}
// app/dashboard/layout.js (nested):
export default function DashboardLayout({ children }) {
return <div className="dashboard"><Sidebar />{children}</div>;
}- Root layout (app/layout.js) = MANDATORY, <html>/<body>, define, karta, hai
- Nested layouts, PARENT, ke, andar, NEST, hote, hain
- Layouts, navigation, PAR, RE-RENDER, nahi, hote — state, preserve, hoti, hai
Layouts, ko, page, se, DATA, PASS, karne, ka, DIRECT, way, NAHI, hai — SHARED, DATA, ke, liye, fetch() ki, AUTOMATIC, request, memoization, USE, ki, ja, sakti, hai, jahan, SAME, fetch, call, layout, aur, page, DONO, mein, ki, jaaye, LEKIN, sirf, EK, HI, BAAR, execute, ho.
// Dono, layout.js, aur, page.js, mein, EK, hi, fetch, call — automatically, deduplicated:
const user = await fetch("/api/user").then(r => r.json());Route, groups, ke, saath, MULTIPLE, "root-like" layouts, banaye, ja, sakte, HAIN — jaise, EK, (marketing) group, ka, apna, header/footer, aur, EK, (app) group, ka, apna, DIFFERENT, dashboard, shell.