NextJS-এ সমান্তরাল রাউটিং

NextJS-এ এটি করা সম্ভব যাতে সাইটের একটি অংশ বিভিন্ন কন্টেন্ট দেখায় অনুরোধকৃত URL-এর উপর নির্ভর করে। একে সমান্তরাল রাউটিং বলা হয়।

এর একটি উদাহরণ দেখা যাক। ধরি আমাদের সাইটের নিম্নলিখিত লেআউট আছে:

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

ধরি আমরা চাই যে হেডারে ডাইনামিক তথ্য দেখানো হোক। ধরি /users URL-এ ব্যবহারকারীদের দেখানো হবে একটি কম্পোনেন্টের মাধ্যমে, এবং /posts URL-এ পোস্ট দেখানো হবে একটি কম্পোনেন্টের মাধ্যমে।

এই ধরনের সমান্তরাল রাউটিং এর জন্য একটি বিশেষ ফোল্ডার তৈরি করতে হবে, যার নাম @ চিহ্ন দিয়ে শুরু হবে। উদাহরণস্বরূপ, আমাদের ফোল্ডারের নাম দিন @info।

এই ফোল্ডারে আমরা দুটি কম্পোনেন্ট রাখব। প্রথমটি ব্যবহারকারীদের দেখানোর জন্য /users/ ফোল্ডারে, এবং দ্বিতীয়টি পোস্ট দেখানোর জন্য /posts/ ফোল্ডারে। ফলে আমাদের ফাইল স্ট্রাকচারটি হবে নিম্নরূপ:

/app/
- /@info/
  - /users/
    - page.jsx
  - /posts/
    - page.jsx

এখন আমাদের সাইটের লেআউটে একটি বিশেষ কমান্ড লিখতে হবে সন্নিবেশ করার জন্য। এর জন্য একটি বিশেষ ডাইনামিক স্লট ব্যবহার করতে হবে।

এটি কী তা বুঝতে, প্রথমে আমাদের সাইটের লেআউট ফাংশনের প্যারামিটারটি দেখুন:

export default function RootLayout({children}) {
	return (
		
	);
}

লক্ষ্য করুন যে প্যারামিটার হিসেবে আমাদের কাছে একটি অবজেক্ট পাস করা হয়, যেখান থেকে আমরা সাইটের কন্টেন্ট children ভেরিয়েবলে নিয়ে থাকি।

এই অবজেক্টে অন্যান্য কীও থাকতে পারে। সেগুলো সেইসব ফোল্ডারের সাথে মিলে যায়, যাদের নাম @ দিয়ে শুরু করেছি।

আমাদের ক্ষেত্রে আমাদের কাছে @info ফোল্ডার আছে, যার মানে হল আমাদের কাছে info ভেরিয়েবলটি অ্যাক্সেসযোগ্য হবে, এবং URL-এর উপর নির্ভর করে এটিতে থাকবে কম্পোনেন্টগুলির যেকোনো একটির কন্টেন্ট - ব্যবহারকারী বা পোস্ট। এই ভেরিয়েবলটি নেওয়া যাক:

export default function RootLayout({children, info}) {
	return (
		
	);
}

এখন লেআউটের মার্কআপের ভিতরে আমরা info ভেরিয়েবলটি দেখাতে পারি। এই স্থানে URL-এর উপর নির্ভর করে আমাদের কম্পোনেন্টগুলির যেকোনো একটির কন্টেন্ট সন্নিবেশিত হবে:

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

ডান সাইডবারের জন্য একটি ডাইনামিক স্লট তৈরি করুন।

বাম সাইডবারের জন্য একটি ডাইনামিক স্লট তৈরি করুন।