NextJS-এ কম্পোনেন্টে ওয়েবসাইটের অংশ

পূর্ববর্তী পাঠে, আমরা লেআউট ফাইলে সরাসরি ওয়েবসাইটের অংশের টেক্সট লিখেছি:

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

যাইহোক, এটি অসুবিধাজনক হতে পারে যখন ওয়েবসাইটের অংশগুলোতে প্রচুর কোড এবং টেক্সট থাকে। তাই সাধারণত ওয়েবসাইটের অংশগুলো আলাদা কম্পোনেন্ট ফাইলে স্থানান্তরিত করা হয়।

উদাহরণস্বরূপ, আসুন সাইটের হেডার একটি আলাদা কম্পোনেন্টে স্থানান্তর করি। আসুন সংশ্লিষ্ট ফাইল তৈরি করি:

comp/header/header.jsxexport default function Header() {
  return <>
    header
  </>;
}

লেআউট ফাইলে আমাদের কম্পোনেন্ট ইম্পোর্ট করি:

app/layout.jsximport Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
  
}

এর নাম সহ ট্যাগ ব্যবহার করে আমাদের কম্পোনেন্টের টেক্সট আউটপুট করি:

app/layout.jsximport Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          <Header />
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}