NextJS-এ সাইট লেআউটে কন্টেন্ট

আসুন সাইটের মূল লেআউটটি বিবেচনা করি, যা আমরা আগের পাঠে বুঝতে শুরু করেছিলাম:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

আপনি যেমন দেখছেন, সাইট লেআউটটি একটি ফাংশন সহ একটি কম্পোনেন্ট। এতে ফাংশনের প্যারামিটারে একটি অবজেক্ট পাস করা হয়, যেখান থেকে আমরা children কীটি সংশ্লিষ্ট ভেরিয়েবলে নিষ্কাশন করি। এই ভেরিয়েবলে page.jsx ফাইলের বিষয়বস্তু সংরক্ষিত থাকে, যা অনুরোধকৃত URL-এর সাথে মিলে যায়।

অর্থাৎ, layout.jsx ফাইলে সাইটের লেআউট সংরক্ষিত থাকে, এবং children ভেরিয়েবলের সাহায্যে আমরা সাইট লেআউটে সেই স্থানটি নির্দেশ করি, যেখানে পৃষ্ঠার কন্টেন্ট সন্নিবেশিত হওয়া উচিত।

উদাহরণস্বরূপ, আসুন পৃষ্ঠার কন্টেন্টটিকে কোনো ট্যাগে সাজাই:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <main>
          {children}
        </main>
      </body>
    </html>
  );
}