Dynamische overdracht van metadata van inhoud in NextJS

In de vorige les hebben we geleerd hoe we metadata in de inhoud van de site kunnen instellen. Deze methode is goed, maar niet altijd toepasbaar. Het punt is dat de metadata van de pagina kan veranderen afhankelijk van de parameter van de dynamische route.

Laten we een voorbeeld bekijken. Stel dat we een bestand hebben met inhoud voor het tonen van een gebruiker op basis van zijn id. Stel dat in dit bestand een array met gebruikers staat:

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

Laten we de gegevens van de gebruiker tonen, die overeenkomt met de doorgegeven parameter:

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

Laten we nu naar ons probleem kijken. Aangezien we verschillende gebruikers tonen, moeten de metadata voor hen ook verschillend zijn. We moeten ze dynamisch vormen, afhankelijk van de waarde van de parameter.

Dit wordt gedaan met behulp van een speciale functie generateMetadata, die we moeten exporteren uit onze component:

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

In deze functie zijn de routeparameters beschikbaar voor ons:

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

Laten we de juiste metadata teruggeven afhankelijk van de waarde van de parameter:

export const generateMetadata = ({params}) => {
	return {
		title: `Pagina voor gebruiker {params.id}`,
		description: `Beschrijving voor gebruiker "{users[params.id]}"`,
	};
};

Maak een route die adressen verwerkt van het type /post/:id, waar in plaats van :id elk nummer kan staan.

Stel dat de volgende array gegeven is:

let posts = [
	{
		id: '1',
		title: 'bericht 1',
		desc: 'beschrijving voor bericht 1',
		text: 'tekst1 tekst1 tekst1 tekst1 tekst1 tekst1 tekst1 tekst1',
	},
	{
		id: '2',
		title: 'bericht 2',
		desc: 'beschrijving voor bericht 2',
		text: 'tekst2 tekst2 tekst2 tekst2 tekst2 tekst2 tekst2 tekst2',
	},
	{
		id: '3',
		title: 'bericht 3',
		desc: 'beschrijving voor bericht 3',
		text: 'tekst3 tekst3 tekst3 tekst3 tekst3 tekst3 tekst3 tekst3',
	},
];

export default function Post() {
	
}

Zorg ervoor dat voor de opgegeven id de opmaak van het juiste bericht wordt getoond, en ook de juiste titel en metabeschrijving worden ingesteld.