NextJSda Komponentlarning Umumiy Ma'lumotlari

Bir nechta komponentlar bir xil ma'lumotlarga kirishishi kerak bo'lgan vaziyatlar bo'ladi. Misol uchun, aytaylik, bizda foydalanuvchilar massivi mavjud. Bir yo'nalishda foydalanuvchilar ro'yxatini ko'rsatishni xohlaymiz, dinamik parametrli boshqa yo'nalishda esa - uning id bo'yicha aniq foydalanuvchi tavsifi.

Keling, tasvirlangan narsani amalga oshiramiz. Quyidagi fayl tuzilmasini qilaylik:

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

Foydalanuvchilar ma'lumotlari bilan alohida fayl yaratamiz:

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

Foydalanuvchilar ro'yxatini ko'rsatish uchun komponent yaratamiz:

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

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

Uning id bo'yicha aniq foydalanuvchini chiqarish uchun komponent yaratamiz:

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

Quyidagi massiv berilgan:

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

Ikkita komponent yarating. Birinchi komponent mahsulotlar ro'yxatini ko'rsatsin, ikkinchisi esa mahsulotning batafsil tavsifini ko'rsatsin.