Next.jsBeginner
Layouts
Root layout, nested layouts, template — shared UI কীভাবে তৈরি করবেন বাংলায়।
13টি অংশবাংলা ভাষায়
Layout হলো shared UI যা একাধিক page-এর মাঝে ভাগ করা থাকে — যেমন navbar, footer, sidebar। Navigation সময় layout state ধরে রাখে এবং পুনরায় render হয় না।
Root Layout
app/layout.tsx হলো root layout — এটি বাধ্যতামূলক এবং অবশ্যই <html> ও <body> tag থাকতে হবে।
app/layout.tsxtsx
tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="bn">
<body>
<header>Shared Navbar</header>
<main>{children}</main>
<footer>Shared Footer</footer>
</body>
</html>
);
}Nested Layouts
যেকোনো route segment-এ আলাদা layout.tsx দিলে সেটি তার child partner-এর সব route-কে (root layout-এর ভেতরে) মোড়ায়।
app/blog/layout.tsxtsx
tsx
export default function BlogLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section className="flex gap-6">
<aside>Blog Sidebar</aside>
<main>{children}</main>
</section>
);
}এখন /blog ও /blog/[slug] দুটোই এই layout এর ভেতরে render হবে।
Layout Hierarchy
Component hierarchytext
text
RootLayout (app/layout.tsx)
└── BlogLayout (app/blog/layout.tsx)
└── Page (app/blog/page.tsx)Route Groups দিয়ে Separate Layout
Structuretext
text
app/
├── (marketing)/
│ ├── layout.tsx → marketing layout
│ └── page.tsx → /
└── (shop)/
├── layout.tsx → shop layout
└── cart/
└── page.tsx → /cartLayout বনাম Template
Layout navigation-এ state ধরে রাখে (re-render হয় না)। template.tsx চাইলে প্রতিবার নতুন instance তৈরি হয় — state reset হয়। সাধারণত layout-ই যথেষ্ট।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।