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

Эки компонент жасаңыз. Биринчиси продуктулардын тизмесин көрсөтсүн, экинчиси болсо продуктунун деталдуу сүрөттөлүшүн көрсөтсүн.