Usambazaji wa Meta Data Kinyume na Maudhui Katika NextJS

Katika somo lililopita, tulijifunza jinsi ya kuweka meta data kwenye maudhui ya tovuti. Njia hii ni nzuri, lakini haitumiki kila wakati. Swala ni kwamba meta data ya ukurasa inaweza kubadilika kulingana na parameta ya njia ya mienendo.

Tuangalie kwa mfano. Tuchukulie tuna faili iliyo na maudhui ya kuonyesha mtumiaji kulingana na id yake. Tuchukulie kwenye faili hii kuna safu ya watumiaji:

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

Wacha tuonyeshe data ya mtumiaji, anayefanana na parameta iliyopitishwa:

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

Sasa tuendelee kwenye tatizo letu. Kwa kuwa tunaonyesha watumiaji tofauti, basi meta data yao pia inapaswa kuwa tofauti. Tunapaswa kuunda meta data kwa mienendo, kulingana na thamani ya parameta.

Hii inafanywa kwa kutumia utendaji maalum generateMetadata, ambayo tunapaswa kuitoa nje kutoka kwa sehemu yetu:

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

Katika utendaji huu, parameta za njia zinapatikana kwetu:

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

Wacha tutoe meta data inayohitajika kulingana na thamani ya parameta:

src/app/test/page.jsxexport const generateMetadata = ({params}) => {
  return {
    title: `Ukurasa wa mtumiaji {params.id}`,
    description: `Maelezo kwa mtumiaji "{users[params.id]}"`,
  };
};

page.jsxlet posts = [
  {
    id: '1',
    title: 'post 1',
    desc: 'maelezo mafupi kwa post 1',
    text: 'maandishi1 maandishi1 maandishi1 maandishi1 maandishi1 maandishi1 maandishi1 maandishi1',
  },
  {
    id: '2',
    title: 'post 2',
    desc: 'maelezo mafupi kwa post 2',
    text: 'maandishi2 maandishi2 maandishi2 maandishi2 maandishi2 maandishi2 maandishi2 maandishi2',
  },
  {
    id: '3',
    title: 'post 3',
    desc: 'maelezo mafupi kwa post 3',
    text: 'maandishi3 maandishi3 maandishi3 maandishi3 maandishi3 maandishi3 maandishi3 maandishi3',
  },
];

export default function Post() {
  
}