Dinamično posredovanje metapodatkov iz vsebine v NextJS

V prejšnji lekciji smo se naučili nastaviti metapodatke v vsebini spletnega mesta. Ta način je dober, vendar ni vedno uporaben. Bistvo je, da se lahko metapodatki strani spreminjajo glede na parameter dinamične poti.

Poglejmo si na primeru. Recimo, da imamo datoteko z vsebino za prikaz uporabnika po njegovem id. Naj v tej datoteki obstaja matrika z uporabniki:

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

Izpišimo podatke uporabnika, ki ustreza posredovanemu parametru:

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

Pojdimo zdaj k naši težavi. Ker prikazujemo različne uporabnike, morajo biti tudi metapodatki zanje različni. Moramo jih oblikovati dinamično, odvisno od vrednosti parametra.

To naredimo s posebno funkcijo generateMetadata, ki jo moramo izvoziti iz našega komponenta:

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

V tej funkciji so nam dostopni parametri poti:

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

Vrnimo ustrezne metapodatke glede na vrednost parametra:

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

page.jsxlet posts = [
  {
    id: '1',
    title: 'objava 1',
    desc: 'opis za objavo 1',
    text: 'besedilo1 besedilo1 besedilo1 besedilo1 besedilo1 besedilo1 besedilo1',
  },
  {
    id: '2',
    title: 'objava 2',
    desc: 'opis za objavo 2',
    text: 'besedilo2 besedilo2 besedilo2 besedilo2 besedilo2 besedilo2 besedilo2',
  },
  {
    id: '3',
    title: 'objava 3',
    desc: 'opis za objavo 3',
    text: 'besedilo3 besedilo3 besedilo3 besedilo3 besedilo3 besedilo3 besedilo3',
  },
];

export default function Post() {
  
}