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

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

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

app/users/[id]/page.jsxlet users = [
  'user1',
  'user2',
  'user3',
  'user4',
  'user5',
];

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

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

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

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

src/app/test/page.jsxexport const generateMetadata = () => {
  return {
    title: '',
    description: '',
  };
};

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

src/app/test/page.jsxexport const generateMetadata = ({params}) => {
  console.log(params);
};

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

src/app/test/page.jsxexport const generateMetadata = ({params}) => {
  return {
    title: `Page for user {params.id}`,
    description: `Description for user "{users[params.id]}"`,
  };
};

page.jsxlet 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() {
  
}