NextJS komponentleriniň umumy maglumatlary

Birnäçe komponentleriň bir maglumatlara girmegi zerur bolýan ýagdaýlar bolýar. Mysal üçin, biziň käbir ulanyjylar massiwimiz bar bolsun. Bir roýtda ulanyjylaryň sanawyny görkezmek isleýäris, ikinji roýtda bolsa, dinamik parametr bilen - onuň id boýunça kesgitlenen ulanyjynyň düşündirişi.

Görkezileni amala aşyralyň. Aşakdaky faýl gurluşyny edeliň:

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

Ulanyjylaryň maglumatlary üçin aýratyn faýl döredeliň:

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

Ulanyjylaryň sanawyny görkezmek üçin komponent döredeliň:

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

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

Kesgitlenen ulanyjyny onuň id boýunça görkezmek üçin komponent döredeliň:

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>;
}

Aşakdaky massiw berlen:

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

Iki komponent düzüň. Birinjisi önümleriň sanawyny görkezsin, ikinjisi bolsa önümiň jikme-jik düşündirişini görkezsin.