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