NextJS-এ নেস্টেড লেআউট

আপনি জানেন, /app ফোল্ডারে /layout.jsx ফাইলে ওয়েবসাইটের মূল লেআউট অবস্থিত।

ইচ্ছা করলে, তবে, নেস্টেড ফোল্ডারগুলিতে নিজস্ব লেআউট তৈরি করা যেতে পারে। এই ক্ষেত্রে, পৃষ্ঠার কন্টেন্ট প্রথমে নেস্টেড লেআউটে ঢোকানো হবে, এবং তারপর প্রাপ্ত ফলাফলটি মূল লেআউটে ঢোকানো হবে।

চলুন অনুশীলনে চেষ্টা করি। ধরুন আমাদের মূল লেআউটটির নিম্নলিখিত রূপ রয়েছে:

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

চলুন /users ফোল্ডার থেকে সমস্ত কন্টেন্টের জন্য আরও একটি, নেস্টেড লেআউট তৈরি করি:

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <div className="info">
      message for all users
    </div>
    <div className="content">
      {children}
    </div>
  );
}

আপনি দেখতে পাচ্ছেন, এই লেআউটে আমরা পৃষ্ঠার মূল ট্যাগগুলি উল্লেখ করি না, কারণ সেগুলি ইতিমধ্যেই আমাদের ওয়েবসাইটের মূল লেআউটে রয়েছে।

চলুন ব্যবহারকারী দেখানোর জন্য কন্টেন্ট সহ একটি ফাইলও তৈরি করি:

src/app/users/show/page.jsxexport default function User() {
  return <>
    <h1>User</h1>
    <p>
      user description
    </p>
  </>;
}

এই ম্যানিপুলেশনগুলির পরে আমাদের ফাইল স্ট্রাকচারটি এইরকম দেখাবে:

• /app/layout.jsx/users/layout.jsx/show/page.jsx

এখন, যদি সংশ্লিষ্ট URL-এ অ্যাক্সেস করা হয়, NextJS সবকিছু একত্রিত করবে এবং ব্রাউজারে আমরা নিম্নলিখিত চূড়ান্ত HTML কোড পাব:

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        message for all users
      </div>
      
      <h1>User</h1>
      <p>
        user description
      </p>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>