Dinamisku metadatu nodošana no satura NextJS
Iepriekšējā nodarbībā mēs iemācījāmies iestatīt metadatus vietnes saturā. Šī metode ir laba, bet ne vienmēr piemērojama. Lieta tāda, ka lapas metadati var mainīties atkarībā no dinamiskā maršruta parametra.
Apskatīsim to ar piemēru.
Pieņemsim, ka mums ir fails ar saturu
lai parādītu lietotāju pēc viņa id.
Pieņemsim, ka šajā failā ir
massīvs ar lietotājiem:
let users = [
'user1',
'user2',
'user3',
'user4',
'user5',
];
Parādīsim lietotāja datus, kas atbilst nodotajam parametram:
export default function User({ params }) {
return <>
<h1>lietotājs {params.id}</h1>
<p>
vārds: {users[params.id]}
</p>
</>;
}
Pāriesim tagad pie mūsu problēmas. Tā kā mēs rādām dažādus lietotājus, tad arī metadati tiem jābūt dažādiem. Mums tie jāveido dinamiski, atkarībā no parametra vērtības.
Tas tiek darīts, izmantojot īpašu
funkciju generateMetadata,
ko mums ir jāeksportē
no mūsu komponenta:
export const generateMetadata = () => {
return {
title: '',
description: '',
};
};
Šajā funkcijā mums ir pieejami maršruta parametri:
export const generateMetadata = ({params}) => {
console.log(params);
};
Atdosim vajadzīgos metadatus atkarībā no parametra vērtības:
export const generateMetadata = ({params}) => {
return {
title: `Lapa lietotājam {params.id}`,
description: `Apraksts lietotājam "{users[params.id]}"`,
};
};
Izveidojiet maršrutu, kas apstrādā adreses
veida /post/:id, kur vietā :id
var būt jebkurš skaitlis.
Pieņemsim, ka dots šāds massīvs:
let posts = [
{
id: '1',
title: 'post 1',
desc: 'apraksts ierakstam 1',
text: 'teksts1 teksts1 teksts1 teksts1 teksts1 teksts1 teksts1',
},
{
id: '2',
title: 'post 2',
desc: 'apraksts ierakstam 2',
text: 'teksts2 teksts2 teksts2 teksts2 teksts2 teksts2 teksts2',
},
{
id: '3',
title: 'post 3',
desc: 'apraksts ierakstam 3',
text: 'teksts3 teksts3 teksts3 teksts3 teksts3 teksts3 teksts3',
},
];
export default function Post() {
}
Izdariet tā, lai pēc norādītā id tiktu izvadīta vajadzīgā ieraksta izkārtojums, kā arī iestatītos pareizais nosaukums un metaapraksts.