Dünaamiline metade edastamine sisust NextJS-is

Eelmises õppetükis õppisime määrama saidisisu metaandmeid. See meetod on hea, kuid alati ei ole rakendatav. Asi on selles, et lehe metaandmed võivad muutuda sõltuvalt dünaamilise route'i parameetrist.

Vaatame seda näite varal. Oletame, et meil on fail sisuga kasutaja kuvamiseks tema id järgi. Oletame, et selles failis on massiiv kasutajatega:

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

Kuvame kasutaja andmed, vastavalt edastatud parameetrile:

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

Liigume nüüd oma probleemi juurde. Kuna me kuvame erinevaid kasutajaid, siis ka nende metaandmed peaksid olema erinevad. Me peame need dünaamiliselt moodustama, sõltuvalt parameetri väärtusest.

See tehakse spetsiaalse funktsiooni generateMetadata abil, mille me peame eksportima oma komponendist:

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

Selles funktsioonis on meile kättesaadavad route'i parameetrid:

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

Anname vajalikud metaandmed vastavalt parameetri väärtusele:

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

page.jsxlet posts = [
  {
    id: '1',
    title: 'postitus 1',
    desc: 'kirjeldus postitusele 1',
    text: 'tekst1 tekst1 tekst1 tekst1 tekst1 tekst1 tekst1 tekst1',
  },
  {
    id: '2',
    title: 'postitus 2',
    desc: 'kirjeldus postitusele 2',
    text: 'tekst2 tekst2 tekst2 tekst2 tekst2 tekst2 tekst2 tekst2',
  },
  {
    id: '3',
    title: 'postitus 3',
    desc: 'kirjeldus postitusele 3',
    text: 'tekst3 tekst3 tekst3 tekst3 tekst3 tekst3 tekst3 tekst3',
  },
];

export default function Post() {
  
}