Маълумоти умумии компонентҳо дар 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',
	},
];

Ду компонент созед. Бигзор якум рӯйхати маҳсулотҳоро нишон диҳад, ва дуввум - тавсифи муфассили маҳсулот.