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

Иккита компонент яратинг. Биринчиси маҳсулотлар рўйхатини кўрсатсин, иккинчиси эса - маҳсулотнинг батафсил тавсифини.