NextJS компоненттериндеги жалпы маалыматтар

Бир нече компоненттер бир маалыматтарга киришиши керек болгон учурлар болот. Мисал үчүн, бизде кандайдыр бир колдонуучулар массиви бар деп коёлу. Бир роутта биз колдонуучулардын тизмесин көрсөткүбүз келет деп коёлу, ал эми динамикалык параметри бар экинчи роутта - анын id боюнча белгилүү бир колдонуучунун сүрөттөлүшү.

Келгиле, сүрөттөлгөндү ишке ашыралы. Төмөнкү файлдык түзүмдү жасайлы:

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

Колдонуучулардын маалыматтары менен өзүнчө файл жасайлы:

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

Колдонуучулардын тизмесин көрсөтүү үчүн компонент жасайлы:

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

Анын id боюнча белгилүү бир колдонуучуну чыгаруу үчүн компонент жасайлы:

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