Next.js 16-এ app/ ডিরেক্টরি ব্যবহারের মাধ্যমে নতুন Layout System চালু হয়েছে।
এখন তুমি খুব সহজে Root Layout, Nested Layout, এবং Dynamic Layout তৈরি করতে পারবে।

এগুলো তোমার ওয়েব অ্যাপকে

পুনরাবৃত্ত UI অংশ (যেমন Navbar, Sidebar, Footer) পুনরায় ব্যবহারযোগ্য করে,
রুট পরিবর্তনের সময় পারফরম্যান্স বাড়ায়,
আর সার্ভার কম্পোনেন্ট ব্যবহার করে কোড অপটিমাইজ করে।

⚙️ ১️⃣ Root Layout তৈরি করা

প্রত্যেক Next.js অ্যাপে একটি Root Layout থাকা বাধ্যতামূলক।
এটি সাধারণত app/layout.tsx ফাইলে থাকে এবং পুরো অ্যাপের কাঠামো (HTML, Body, Theme ইত্যাদি) নির্ধারণ করে।


// app/layout.tsx

export const metadata = {
  title: "My Next App",
  description: "Next.js 16 Layout Example in Bangla",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="bn">
      <body className="bg-gray-100 text-gray-900">
        <header className="p-4 bg-blue-600 text-white">
          <h1 className="text-xl font-bold">আমার Next.js অ্যাপ</h1>
        </header>

        <main className="p-6">{children}</main>

        <footer className="p-4 bg-gray-800 text-white text-center">
          <p>© ২০২৫ আমার কোম্পানি</p>
        </footer>
      </body>
    </html>
  );
}

🧩 এখানে:

<html> এবং <body> ট্যাগ Root Layout-এই থাকতে হবে।
children প্রপের মাধ্যমে এর ভেতরে প্রতিটি পেজ বা সাব-লেআউট রেন্ডার হবে।

🧱 ২️⃣ Nested Layout (সাব-লেআউট)

ধরো তোমার একটি Dashboard সেকশন আছে যেখানে একটি Sidebar ও নির্দিষ্ট UI থাকবে।
তাহলে তুমি app/dashboard/layout.tsx ফাইল তৈরি করতে পারো।


// app/dashboard/layout.tsx

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <section className="flex">
      <aside className="w-64 bg-gray-200 p-4">
        <ul>
          <li>🏠 Overview</li>
          <li>📊 Reports</li>
          <li>⚙️ Settings</li>
        </ul>
      </aside>

      <div className="flex-1 p-6 bg-white rounded-xl shadow">
        {children}
      </div>
    </section>
  );
}

এখন, যখন তুমি /dashboard রুটে যাবে, এই লেআউটটি RootLayout-এর ভেতরে নেস্টেড হয়ে যাবে।

💡 Note: RootLayout এবং DashboardLayout – দুটোই একসাথে ব্যবহার হবে (nested layouts)।

🧭 ৩️⃣ পেজ তৈরি করা

প্রত্যেক layout-এর নিচে তুমি page.tsx ফাইল রাখতে পারো, যেটি সেই রুটের UI রেন্ডার করবে।


// app/dashboard/page.tsx

export default function DashboardPage() {
  return (
    <div>
      <h2 className="text-2xl font-semibold mb-4">Dashboard Overview</h2>
      <p>এখানে তুমি তোমার রিপোর্ট এবং এনালিটিক্স দেখতে পারবে।</p>
    </div>
  );
}

রুট /dashboard ভিজিট করলে UI এমন হবে:
RootLayout → DashboardLayout → DashboardPage

🔄 ৪️⃣ Dynamic Layout (ডায়নামিক প্যারামিটারসহ লেআউট)

ধরো তোমার রুট /dashboard/[team] এমন — যেখানে প্রতিটি টিমের জন্য আলাদা লেআউট দরকার।
তাহলে ফাইল তৈরি করো 👇


// app/dashboard/[team]/layout.tsx

export default async function TeamLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ team: string }>;
}) {
  const { team } = await params;

  return (
    <div className="p-6 border border-gray-300 rounded-lg">
      <h2 className="text-xl font-bold mb-2">Team: {team}</h2>
      {children}
    </div>
  );
}

এখন যদি ইউজার /dashboard/alpha এ যায়, তাহলে UI-তে Team: alpha দেখাবে।

৫️⃣ Layout রেন্ডারিং আচরণ

বিষয়	ব্যাখ্যা
Persistent Rendering	Layout গুলো একবার লোড হওয়ার পর রুট পরিবর্তনের সময় পুনরায় রি-রেন্ডার হয় না।
Faster Navigation	Layout ক্যাশড থাকায় Next.js কেবল child অংশ (page) রিফ্রেশ করে।
Search Params পরিবর্তন হলে Layout রি-রেন্ডার হয় না	তাই এটি Client Component-এ `useSearchParams()` দিয়ে হ্যান্ডেল করতে হয়।

🧠 ৬️⃣ Data Fetching সহ Layout

Layout এর ভেতর সার্ভার থেকে ডেটা ফেচ করা যায় (কারণ Layout নিজেই Server Component)।


// app/profile/layout.tsx

async function getUser() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
  return res.json();
}

export default async function ProfileLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await getUser();

  return (
    <div className="p-6">
      <h2 className="text-lg font-semibold">👤 User: {user.name}</h2>
      {children}
    </div>
  );
}

৭️⃣ সারসংক্ষেপ

ফাইল	কাজ
`app/layout.tsx`	মূল লেআউট (HTML ও BODY সহ)
`app/[segment]/layout.tsx`	নির্দিষ্ট রুটের সাব-লেআউট
`app/[segment]/page.tsx`	সেই রুটের UI পেজ
`params`	ডায়নামিক রুট প্যারামিটার
`children`	সাব-রুট বা পেজ যা Layout-এর ভেতরে রেন্ডার হয়

✅ শেষ কথা

Next.js 16-এর Layout System তোমাকে দিচ্ছে —

বেশি পারফরম্যান্স,
কোড পুনর্ব্যবহারযোগ্যতা,
এবং পরিষ্কার UI স্ট্রাকচার তৈরি করার ক্ষমতা।

তুমি যদি এর সাথে Loading, Error, এবং Template ফাইল কনভেনশন শিখে ফেলো,
তাহলে তোমার Next.js প্রোজেক্ট হবে প্রোফেশনাল লেভেলের।

Projukti Labs

Next.js 16 Layout System সম্পূর্ণ গাইড