App Router-এ লেআউট কী? – Next.js · IT ইন্টারভিউ অনুশীলন

App Router-এ লেআউট কী?

একটি লেআউট হল ভাগ করা ইউআই যা একাধিক পৃষ্ঠাকে মোড়ায় এবং নেভিগেশন জুড়ে অব্যাহত থাকে — যখন আপনি চাইল্ড রুটগুলির মধ্যে চলে যান তখন এটি পুনরায় রেন্ডার হয় না বা স্টেট হারায় না। আপনি একটি layout.tsx ফাইল দিয়ে এটি সংজ্ঞায়িত করেন।

রুট লেআউট (প্রয়োজনীয়)

tsx


   () {
   (
    
  );
}

text

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

tsx

// 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>
  );
}

App Router-এ লেআউট কী?

রুট লেআউট (প্রয়োজনীয়)

নেস্টেড লেআউট

কেন স্থায়িত্ব গুরুত্বপূর্ণ

লেআউট বনাম টেমপ্লেট

কেন এটি গুরুত্বপূর্ণ