Маълумоти умумии компонентҳо дар 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',
  },
];