Dynamisk överföring av metadata från innehåll i NextJS

I föregående lektion lärde vi oss att ställa in metadata i webbplatsens innehåll. Denna metod är bra, men inte alltid tillämpbar. Saken är den att sidans metadata kan ändras beroende på en parameter i den dynamiska routen.

Låt oss titta på ett exempel. Antag att vi har en fil med innehåll för att visa en användare baserat på hens id. Antag att det i denna fil finns en array med användare:

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

Låt oss visa data för den användare som motsvarar den skickade parametern:

export default function User({ params }) {
	return <>
		<h1>användare {params.id}</h1>
		<p>
			namn: {users[params.id]}
		</p>
	</>;
}

Låt oss nu gå vidare till vårt problem. Eftersom vi visar olika användare, bör även metadata för dem vara olika. Vi måste forma dem dynamiskt, beroende på parameterns värde.

Detta görs med hjälp av en speciell funktion generateMetadata, som vi måste exportera från vår komponent:

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

I denna funktion har vi tillgång till routparametrar:

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

Låt oss returnera rätt metadata beroende på parameterns värde:

export const generateMetadata = ({params}) => {
	return {
		title: `Sida för användare {params.id}`,
		description: `Beskrivning för användare "{users[params.id]}"`,
	};
};

Skapa en rout som hanterar adresser av typen /post/:id, där :id kan ersättas med vilket tal som helst.

Antag att följande array finns:

let posts = [
	{
		id: '1',
		title: 'inlägg 1',
		desc: 'beskrivning för inlägg 1',
		text: 'text1 text1 text1 text1 text1 text1 text1 text1',
	},
	{
		id: '2',
		title: 'inlägg 2',
		desc: 'beskrivning för inlägg 2',
		text: 'text2 text2 text2 text2 text2 text2 text2 text2',
	},
	{
		id: '3',
		title: 'inlägg 3',
		desc: 'beskrivning för inlägg 3',
		text: 'text3 text3 text3 text3 text3 text3 text3 text3',
	},
];

export default function Post() {
	
}

Gör så att för ett givet id visas inläggets rendering, samt att rätt titel och metabeskrivning sätts.