⊗jsnxPmLtCMd 37 of 57 menu

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.

Latviešu
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Mēs izmantojam sīkdatnes, lai nodrošinātu vietnes darbību, analīti un personalizāciju. Datu apstrāde notiek saskaņā ar Konfidencialitātes politiku.
pieņemt visus iestatīt noraidīt