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:

/app/users/users.jsexport 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:

app/users/list/page.jsximport 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:

app/users/show/[id]/page.jsximport 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>;
}

/app/prods/prods.jslet 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',
  },
];