Transmission dynamique des métadonnées du contenu dans NextJS

Dans la leçon précédente, nous avons appris à définir les métadonnées dans le contenu du site. Cette méthode est bonne, mais n'est pas toujours applicable. Le fait est que les métadonnées de la page peuvent changer en fonction d'un paramètre de route dynamique.

Regardons un exemple. Supposons que nous ayons un fichier de contenu pour afficher un utilisateur par son id. Supposons que dans ce fichier, il y ait un tableau avec des utilisateurs :

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

Affichons les données de l'utilisateur correspondant au paramètre transmis :

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

Passons maintenant à notre problème. Puisque nous affichons différents utilisateurs, les métadonnées pour eux doivent également être différentes. Nous devons les former dynamiquement, en fonction de la valeur du paramètre.

Cela se fait à l'aide d'une fonction spéciale generateMetadata, que nous devons exporter de notre composant :

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

Dans cette fonction, les paramètres de route sont accessibles :

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

Renvoyons les métadonnées appropriées en fonction de la valeur du paramètre :

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

Créez une route qui traite les adresses de la forme /post/:id, où au lieu de :id il peut y avoir n'importe quel nombre.

Supposons le tableau suivant :

let posts = [
	{
		id: '1',
		title: 'post 1',
		desc: 'description for post 1',
		text: 'text1 text1 text1 text1 text1 text1 text1 text1',
	},
	{
		id: '2',
		title: 'post 2',
		desc: 'description for post 2',
		text: 'text2 text2 text2 text2 text2 text2 text2 text2',
	},
	{
		id: '3',
		title: 'post 3',
		desc: 'description for post 3',
		text: 'text3 text3 text3 text3 text3 text3 text3 text3',
	},
];

export default function Post() {
	
}

Faites en sorte que pour l'id donné, le balisage du post correspondant soit affiché, et que le titre et la méta-description corrects soient définis.