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

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

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

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

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

export default function Header() {
	return <>
		header
	</>;
}

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

import Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
	
}

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

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

সাইটের হেডার এবং ফুটার সহ আলাদা কম্পোনেন্ট তৈরি করুন।