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:
let users = [
'user1',
'user2',
'user3',
'user4',
'user5',
];
Izpišimo podatke uporabnika, ki ustreza posredovanemu parametru:
export 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:
export const generateMetadata = () => {
return {
title: '',
description: '',
};
};
V tej funkciji so nam dostopni parametri poti:
export const generateMetadata = ({params}) => {
console.log(params);
};
Vrnimo ustrezne metapodatke glede na vrednost parametra:
export const generateMetadata = ({params}) => {
return {
title: `Stran za uporabnika {params.id}`,
description: `Opis za uporabnika "{users[params.id]}"`,
};
};
Naredite pot, ki obdeluje naslove
oblike /post/:id, kjer je namesto :id
lahko poljubno število.
Naj bo podana naslednja matrika:
let 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() {
}
Naredite tako, da se za podani id izpiše predloga zahtevane objave, in da se nastavita pravilen naslov in metaopis.