NextJS-এ ডাইনামিক রাউটে সেগমেন্ট অ্যারে

প্রয়োজন হলে সমস্ত সেগমেন্টকে একটি ভেরিয়েবলে অ্যারে আকারে পাওয়া যায়। এটি করার জন্য, প্যারামিটারটি বর্গাকার বন্ধনীর মধ্যে নেওয়া হয়, এবং প্যারামিটারের নামের আগে তিনটি বিন্দু বসানো হয়। আসুন একটি উদাহরণ দিয়ে দেখি।

ধরুন আমাদের নিম্নলিখিত ধরনের একটি রাউট আছে: /prod/:category/:name/:id/, যেখানে কোলন চিহ্নিত প্যারামিটারগুলি ডাইনামিক। আসুন এই প্যারামিটারগুলির মানগুলির অ্যারেটি কোনও একটি ভেরিয়েবলে পাই। এই ভেরিয়েবলের নাম যেকোনো কিছু হতে পারে। উদাহরণস্বরূপ, এটির নাম দিন slugs।

নিম্নলিখিত ফাইল স্ট্রাকচার তৈরি করা যাক:

/app/
- /prod/
  - /[...slugs]/

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

export default function Prod({ params }) {
	console.log(params); // মানগুলির অ্যারে
}

এমন একটি রাউট তৈরি করুন যা /prod/:category/:name ধরনের অ্যাড্রেস পরিচালনা করে।

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

let prods = [
	{
		category: 'catg1',
		name: 'prod1',
		cost: 100,
	},
	{
		category: 'catg1',
		name: 'prod2',
		cost: 200,
	},
	{
		category: 'catg2',
		name: 'prod1',
		cost: 300,
	},
	{
		category: 'catg2',
		name: 'prod3',
		cost: 400,
	},
];

কম্পোনেন্টের মার্কআপে প্যারামিটারের মানের উপর নির্ভর করে সংশ্লিষ্ট প্রোডাক্ট প্রদর্শিত হয় তা নিশ্চিত করুন।