NextJS-এ ডাইনামিক রাউট

NextJS-এ ডাইনামিক রাউট তৈরি করা যায়। এই ধরনের রাউটগুলি ধরে নেয় যে URL-এর একটি অংশের যেকোনো মান হতে পারে। উদাহরণস্বরূপ, /users/1 এই ঠিকানাটি নেওয়া যাক, যেখানে একটির পরিবর্তে যেকোনো সংখ্যা হতে পারে, যা প্রযুক্তিগতভাবে সেই ব্যবহারকারীর id-এর সাথে মিলে যাকে আমরা দেখাতে চাই।

এই ক্ষেত্রে আমাদের প্রতিটি সম্ভাব্য সংখ্যার জন্য একাধিক ফোল্ডার তৈরি করার দরকার নেই। এই ঠিকানার অংশটিকে ডাইনামিক হিসেবে ঘোষণা করাই যথেষ্ট। এই ক্ষেত্রে এই ধরনের সমস্ত অনুরোধ একটি সাধারণ page.jsx ফাইল দ্বারা পরিচালিত হবে।

ডাইনামিক প্যারামিটার তৈরি করার জন্য, সংশ্লিষ্ট ফোল্ডারের নাম বর্গাকার বন্ধনীর মধ্যে লিখতে হবে। আমাদের ক্ষেত্রে এটি হবে নিম্নলিখিত ফোল্ডার স্ট্রাকচার:

/app/
- /users/
  - /[id]/

আসুন সংশ্লিষ্ট কম্পোনেন্টটি তৈরি করি:

export default function User() {
	return <p>
		user
	</p>;
}

এই ক্ষেত্রে আমরা যে প্যারামিটার সেট করেছি তা একটি বিশেষ অবজেক্ট params-এ সংরক্ষিত হবে। আসুন এই প্যারামিটারের মানটি দেখাই:

export default function User({ params }) {
	return <p>
		user {params.id}
	</p>;
}

/city/:name ধরনের ঠিকানা পরিচালনা করে এমন একটি রাউট তৈরি করুন, যেখানে :name-এর স্থানে যেকোনো স্ট্রিং হতে পারে।

/show/:country/:city ধরনের ঠিকানা পরিচালনা করে এমন একটি রাউট তৈরি করুন, যেখানে :country এবং :city-এর স্থানে যেকোনো স্ট্রিং হতে পারে।

/post/:id ধরনের ঠিকানা পরিচালনা করে এমন একটি রাউট তৈরি করুন, যেখানে :id-এর স্থানে যেকোনো সংখ্যা হতে পারে।

নিম্নলিখিত অ্যারেটি দেওয়া আছে:

let posts = [
	'post1',
	'post2',
	'post3',
	'post4',
	'post5',
];

export default function Post() {
	
}

id প্যারামিটারের মানের উপর নির্ভর করে কম্পোনেন্টের লেআউটে সংশ্লিষ্ট পোস্ট দেখানোর ব্যবস্থা করুন।

/prod/:id ধরনের ঠিকানা পরিচালনা করে এমন একটি রাউট তৈরি করুন, যেখানে :id-এর স্থানে যেকোনো সংখ্যা হতে পারে।

নিম্নলিখিত অ্যারেটি দেওয়া আছে:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

export default function Prod() {
	
}

id প্যারামিটারের মানের উপর নির্ভর করে কম্পোনেন্টের লেআউটে সংশ্লিষ্ট প্রোডাক্ট দেখানোর ব্যবস্থা করুন।