Dinamiese Oordrag van Metadata uit Inhoud in NextJS

In die vorige les het ons geleer hoe om metadata in die werfinhoud te stel. Hierdie metode is goed, maar nie altyd toepaslik nie. Die saak is dat die bladsy se metadata kan verander afhangend van die parameter van die dinamiese roete.

Laat ons na 'n voorbeeld kyk. Kom ons sê ons het 'n lêer met inhoud om 'n gebruiker volgens sy id te wys. Kom ons sê daar is 'n skikking met gebruikers in hierdie lêer:

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

Laat ons die data van die gebruiker wys, wat ooreenstem met die oorgedra parameter:

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

Laat ons nou na ons probleem oorgaan. Aangesien ons verskillende gebruikers wys, moet die metadata ook vir hulle verskillend wees. Ons moet dit dinamies vorm, afhangend van die waarde van die parameter.

Dit word gedoen met behulp van 'n spesiale funksie generateMetadata, wat ons uit ons komponent moet uitvoer:

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

In hierdie funksie is die roeteparameters vir ons beskikbaar:

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

Laat ons die nodige metadata terugstuur afhangend van die waarde van die parameter:

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

Maak 'n roete wat adresse hanteer van die vorm /post/:id, waar in plaas van :id enige getal kan wees.

Kom ons sê die volgende skikking is gegee:

let posts = [
	{
		id: '1',
		title: 'plas 1',
		desc: 'beskrywing vir plas 1',
		text: 'teks1 teks1 teks1 teks1 teks1 teks1 teks1 teks1',
	},
	{
		id: '2',
		title: 'plas 2',
		desc: 'beskrywing vir plas 2',
		text: 'teks2 teks2 teks2 teks2 teks2 teks2 teks2 teks2',
	},
	{
		id: '3',
		title: 'plas 3',
		desc: 'beskrywing vir plas 3',
		text: 'teks3 teks3 teks3 teks3 teks3 teks3 teks3 teks3',
	},
];

export default function Post() {
	
}

Sorg dat vir die gegewe id die opmaak van die nodige plas vertoon word, en ook dat die korrekte titel en meta-beskrywing gestel word.