Date generale ale componentelor în NextJS

Există situații când mai multe componente trebuie să aibă acces la aceleași date. De exemplu, să presupunem că avem un vector cu utilizatori. Să zicem că pe o rută vrem să afișăm lista utilizatorilor, iar pe o altă rută cu parametru dinamic - descrierea unui utilizator specific după id-ul său.

Să implementăm cele descrise. Să facem următoarea structură de fișiere:

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

Să facem un fișier separat cu datele utilizatorilor:

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

Să facem un component pentru afișarea listei utilizatorilor:

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

export default function List() {
	let list = users.map(user => {
		return <li>
			{user.name}
		</li>;
	});
	
	return <ul>
		{list}
	</ul>;
}

Să facem un component pentru afișarea unui utilizator specific după id-ul său:

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>;
}

Este dat următorul vector:

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',
	},
];

Realizați două componente. Să afișeze primul lista produselor, iar al doilea - descrierea detaliată a produsului.