NextJS-এ কন্টেন্ট থেকে ডাইনামিকভাবে মেটাডাটা প্রেরণ

পূর্ববর্তী পাঠে আমরা শিখেছি কিভাবে সাইটের কন্টেন্টে মেটাডাটা সেট করতে হয়। এই পদ্ধতিটি ভাল, কিন্তু সর্বদা প্রযোজ্য নয়। ব্যাপারটি হল যে পৃষ্ঠার মেটাডাটা ডাইনামিক রুট প্যারামিটারের উপর নির্ভর করে পরিবর্তিত হতে পারে।

আসুন একটি উদাহরণ দেখি। ধরুন আমাদের কাছে ব্যবহারকারীর id অনুযায়ী তাকে দেখানোর জন্য কন্টেন্ট সহ একটি ফাইল আছে। ধরুন এই ফাইলে ব্যবহারকারীদের একটি অ্যারে আছে:

let users = [
	'user1',
	'user2',
	'user3',
	'user4',
	'user5',
];

আসুন প্রদত্ত প্যারামিটারের সাথে মিলে যাওয়া ব্যবহারকারীর ডেটা প্রদর্শন করি:

export default function User({ params }) {
	return <>
		<h1>user {params.id}</h1>
		<p>
			name: {users[params.id]}
		</p>
	</>;
}

এখন আমাদের সমস্যায় ফিরে আসা যাক। যেহেতু আমরা বিভিন্ন ব্যবহারকারী দেখাচ্ছি, সেহেতু তাদের জন্য মেটাডাটাও ভিন্ন হওয়া উচিত। আমাদেরকে প্যারামিটারের মানের উপর নির্ভর করে এগুলি গতিশীলভাবে তৈরি করতে হবে।

এটি একটি বিশেষ ফাংশন generateMetadata এর মাধ্যমে করা হয়, যা আমাদেরকে আমাদের কম্পোনেন্ট থেকে এক্সপোর্ট করতে হবে:

export const generateMetadata = () => {
	return {
		title: '',
		description: '',
	};
};

এই ফাংশনে আমাদের কাছে রুটের প্যারামিটারগুলি উপলব্ধ:

export const generateMetadata = ({params}) => {
	console.log(params);
};

আসুন প্যারামিটারের মানের উপর নির্ভর করে প্রয়োজনীয় মেটাডাটা ফেরত দিই:

export const generateMetadata = ({params}) => {
	return {
		title: `Page for user {params.id}`,
		description: `Description for user "{users[params.id]}"`,
	};
};

একটি রুট তৈরি করুন যা /post/:id ফর্ম্যাটের অ্যাড্রেস হ্যান্ডেল করে, যেখানে :id-এর পরিবর্তে যেকোনো সংখ্যা হতে পারে।

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

let posts = [
	{
		id: '1',
		title: 'post 1',
		desc: 'description for post 1',
		text: 'text1 text1 text1 text1 text1 text1 text1 text1',
	},
	{
		id: '2',
		title: 'post 2',
		desc: 'description for post 2',
		text: 'text2 text2 text2 text2 text2 text2 text2 text2',
	},
	{
		id: '3',
		title: 'post 3',
		desc: 'description for post 3',
		text: 'text3 text3 text3 text3 text3 text3 text3 text3',
	},
];

export default function Post() {
	
}

এটি নিশ্চিত করুন যে প্রদত্ত আইডি অনুযায়ী পোস্টের সঠিক মার্কআপ প্রদর্শিত হয়, এবং সঠিক শিরোনাম এবং মেটা বর্ণনাও সেট হয়।