Dynamický prenos metadát z obsahu v NextJS

V predchádzajúcej lekcii sme sa naučili nastavovať metadáta v obsahu stránky. Tento spôsob je dobrý, ale nie vždy použiteľný. Problém je v tom, že metadáta stránky sa môžu meniť v závislosti od parametra dynamickej trasy.

Pozrime sa na príklad. Predpokladajme, že máme súbor s obsahom pre zobrazenie používateľa podľa jeho id. Nech v tomto súbore je pole s používateľmi:

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

Zobrazme dáta používateľa, ktorý zodpovedá odoslanému parametru:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <>
    <h1>používateľ {params.id}</h1>
    <p>
      meno: {users[params.id]}
    </p>
  </>;
}

Prejdime teraz k nášmu problému. Keďže zobrazujeme rôznych používateľov, aj metadáta pre nich by mali byť rôzne. Musíme ich vytvoriť dynamicky, v závislosti od hodnoty parametra.

To sa robí pomocou špeciálnej funkcie generateMetadata, ktorú musíme exportovať z nášho komponentu:

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

V tejto funkcii sú nám dostupné parametre trasy:

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

Vráťme potrebné metadáta v závislosti od hodnoty parametra:

src/app/test/page.jsxexport const generateMetadata = ({params}) => {
  return {
    title: `Stránka pre používateľa {params.id}`,
    description: `Popis pre používateľa "{users[params.id]}"`,
  };
};

page.jsxlet posts = [
  {
    id: '1',
    title: 'príspevok 1',
    desc: 'popis pre príspevok 1',
    text: 'text1 text1 text1 text1 text1 text1 text1 text1',
  },
  {
    id: '2',
    title: 'príspevok 2',
    desc: 'popis pre príspevok 2',
    text: 'text2 text2 text2 text2 text2 text2 text2 text2',
  },
  {
    id: '3',
    title: 'príspevok 3',
    desc: 'popis pre príspevok 3',
    text: 'text3 text3 text3 text3 text3 text3 text3 text3',
  },
];

export default function Post() {
  
}