Transmetimi Dinamik i Metatëdhënave nga Përmbajtja në NextJS

Në mësimin e mëparshëm mësuam të vendosnim metatëdhënat në përmbajtjen e faqes. Kjo metodë është e mirë, por nuk zbatohet gjithmonë. Çështja është se metatëdhënat e faqes mund të ndryshojnë në varësi të parametrit të rrugës dinamike.

Le të shohim një shembull. Le të themi se kemi një skedar me përmbajtje për të shfaqur një përdorues sipas id të tij. Le të themi se në këtë skedar ka një grup me përdorues:

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

Le të shfaqim të dhënat e përdoruesit, që korrespondon me parametrin e transmetuar:

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

Le të kalojmë tani te problemi ynë. Meqenëse po shfaqim përdorues të ndryshëm, atëherë edhe metatëdhënat për ta duhet të jenë të ndryshme. Ne duhet t'i formësojmë ato në mënyrë dinamike, në varësi të vlerës së parametrit.

Kjo bëhet duke përdorur një funksion të veçantë generateMetadata, të cilin duhet ta eksportojmë nga komponenti ynë:

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

Në këtë funksion na janë të disponueshëm parametrat e rrugës:

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

Le të kthejmë metatëdhënat e duhura në varësi të vlerës së parametrit:

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