Génération dynamique de liens dans NextJS

Supposons que nous ayons un fichier avec des données d'utilisateurs :

export default users = [
	{
		id: 1,
		name: 'name1',
		surn: 'surn1',
	},
	{
		id: 2,
		name: 'name2',
		surn: 'surn2',
	},
	{
		id: 3,
		name: 'name3',
		surn: 'surn3',
	},
];

Créons deux composants. Le premier composant affichera la liste des utilisateurs avec des liens vers leur description détaillée. Le deuxième composant affichera cette description détaillée.

Supposons que l'URL /users/list affiche la liste de tous les utilisateurs, et l'URL /users/show/:id - un utilisateur spécifique par son id.

Pour cela, créons la structure de fichiers suivante :

/app/
- /users/
  - users.js
  - /list/
    - page.jsx
  - /show/[id]/
    - page.jsx

Créons le premier composant, dans lequel nous générerons dynamiquement des liens dans une boucle, en y insérant le id de chaque utilisateur :

import users from '../users.js';
import Link from 'next/link';

export default function List() {
	let list = users.map(user => {
		return <li>
			<Link href={`/users/show/${user.id}`}>
				{user.name}
			</Link>
		</li>;
	});
	
	return <ul>
		{list}
	</ul>;
}

Créons un composant pour afficher un utilisateur spécifique par son id :

import users from '../../users.js';

export default function User({params}) {
	let user = users[params.id];
	
	return <div>
		<span>{user.id}</span>
		<span>{user.name}</span>
		<span>{user.surn}</span>
	</div>;
}

Soit le tableau suivant :

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
		desc: 'desc1',
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
		desc: 'desc2',
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
		desc: 'desc3',
	},
];

Créez deux composants. Que le premier affiche la liste des produits sous forme de liens vers la description complète du produit. Que le deuxième composant affiche la description détaillée du produit.

Faites en sorte que si un id d'un produit inexistant est passé dans l'URL, une erreur 404 soit affichée à l'écran.