Dynamisk overførsel af metadata fra indhold i NextJS

I den forrige lektion lærte vi at indstille metadata i webstedets indhold. Denne metode er god, men ikke altid anvendelig. Problemet er, at sidens metadata kan ændre sig afhængigt af en parameter fra den dynamiske rute.

Lad os se på et eksempel. Antag, at vi har en fil med indhold til visning af en bruger baseret på deres id. Antag, at der i denne fil er en matrix med brugere:

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

Lad os vise brugerens data, der svarer til den overførte parameter:

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

Lad os nu gå videre til vores problem. Da vi viser forskellige brugere, skal deres metadata også være forskellige. Vi skal danne dem dynamisk, afhængigt af parameterværdien.

Dette gøres ved hjælp af en speciel funktion generateMetadata, som vi skal eksportere fra vores komponent:

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

I denne funktion har vi adgang til rutens parametre:

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

Lad os returnere de nødvendige metadata afhængigt af parameterværdien:

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

Opret en rute, der håndterer adresser af typen /post/:id, hvor :id kan erstattes af ethvert tal.

Antag følgende matrix:

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

export default function Post() {
	
}

Sørg for, at den ønskede indlægsopsætning bliver vist for det givne id, og at den korrekte titel og metabeskrivelse indstilles.