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ň:

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

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

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

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