Општи податоци за компонентите во NextJS

Постојат ситуации кога неколку компоненти треба да имаат пристап до истите податоци. Како пример, нека имаме некоја низа со корисници. Нека на еден рут сакаме да го прикажеме списокот на корисници, а на друг рут со динамички параметар - опис на конкретен корисник по неговиот id.

Ајде да го имплементираме опишаното. Да ја направиме следнава фајлова структура:

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

Да направиме посебен фајл со податоци за корисниците:

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

Да направиме компонента за приказ на списокот на корисници:

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

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

Да направиме компонента за приказ на одреден корисник по неговиот 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>;
}

Дадена е следнава низа:

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

Направете две компоненти. Нека првата покажува список на производи, а втората - детален опис на производот.