Dynamisk overføring av metadata fra innhold i NextJS

I forrige leksjon lærte vi å sette metadata i nettstedets innhold. Denne metoden er god, men ikke alltid anvendelig. Saken er at sidens metadata kan endre seg avhengig av parameteren i den dynamiske ruten.

La oss se på et eksempel. Anta at vi har en fil med innhold for å vise en bruker basert på deres id. Anta at i denne filen er det en array med brukere:

let users = [
	'user1',
	'user2',
	'user3',
	'user4',
	'user5',
];

La oss vise dataene for brukeren som tilsvarer den overførte parameteren:

export default function User({ params }) {
	return <>
		<h1>bruker {params.id}</h1>
		<p>
			navn: {users[params.id]}
		</p>
	</>;
}

La oss nå gå videre til problemet vårt. Siden vi viser forskjellige brukere, bør metadataene deres også være forskjellige. Vi må danne dem dynamisk, avhengig av parameterens verdi.

Dette gjøres ved hjelp av en spesiell funksjon generateMetadata, som vi må eksportere fra vår komponent:

export const generateMetadata = () => {
	return {
		title: '',
		description: '',
	};
};

I denne funksjonen har vi tilgang til rutens parametere:

export const generateMetadata = ({params}) => {
	console.log(params);
};

La oss returnere riktig metadata avhengig av parameterens verdi:

export const generateMetadata = ({params}) => {
	return {
		title: `Side for bruker {params.id}`,
		description: `Beskrivelse for bruker "{users[params.id]}"`,
	};
};

Lag en rute som håndterer adresser på formen /post/:id, hvor :id kan erstattes med et hvilket som helst tall.

Anta at følgende array er gitt:

let posts = [
	{
		id: '1',
		title: 'innlegg 1',
		desc: 'beskrivelse for innlegg 1',
		text: 'tekst1 tekst1 tekst1 tekst1 tekst1 tekst1 tekst1 tekst1',
	},
	{
		id: '2',
		title: 'innlegg 2',
		desc: 'beskrivelse for innlegg 2',
		text: 'tekst2 tekst2 tekst2 tekst2 tekst2 tekst2 tekst2 tekst2',
	},
	{
		id: '3',
		title: 'innlegg 3',
		desc: 'beskrivelse for innlegg 3',
		text: 'tekst3 tekst3 tekst3 tekst3 tekst3 tekst3 tekst3 tekst3',
	},
];

export default function Post() {
	
}

Gjør slik at for en gitt id blir markupen for det riktige innlegget vist, og at riktig tittel og metabeskrivelse blir satt.