Komponentu kopīgie dati NextJS

Ir situācijas, kad vairākiem komponentiem jābūt piekļuvei vieniem un tiem pašiem datiem. Piemēram, pieņemsim, ka mums ir noteikts masīvs ar lietotājiem. Pieņemsim, ka vienā route mēs vēlamies parādīt lietotāju sarakstu, bet citā route ar dinamisku parametru - konkrēta lietotāja aprakstu pēc viņa id.

Īstenosim aprakstīto. Izveidosim šādu failu struktūru:

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

Izveidosim atsevišķu failu ar lietotāju datiem:

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

Izveidosim komponentu, lai parādītu lietotāju sarakstu:

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

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

Izveidosim komponentu, lai attēlotu noteiktu lietotāju pēc viņa 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>;
}

Dots šāds masīvs:

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

Izveidojiet divus komponentus. Ļaujiet pirmajam parādīt produktu sarakstu, un otram - detalizētu produkta aprakstu.