Données générales des composants dans NextJS

Il arrive que plusieurs composants doivent accéder aux mêmes données. Prenons l'exemple d'un tableau d'utilisateurs. Supposons que sur une route nous souhaitions afficher la liste des utilisateurs, et sur une autre route avec un paramètre dynamique - la description d'un utilisateur spécifique par son id.

Implémentons ce qui a été décrit. Créons la structure de fichiers suivante :

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

Créons un fichier séparé avec les données des utilisateurs :

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

Créons un composant pour afficher la liste des utilisateurs :

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

export default function List() {
	let list = users.map(user => {
		return <li>
			{user.name}
		</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>;
}

Le tableau suivant est donné :

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, et le second - une description détaillée du produit.