Data ya Pamoja ya Viunganishi katika NextJS

Kuna hali ambapo viunganishi kadhaa vinahitaji kupata data moja. Kwa mfano, hebu tuwe na safu fulani ya watumiaji. Hebu kwenye njia moja tutakaonyesha orodha ya watumiaji, na kwenye njia nyingine yenye kigezo cha nguvu - maelezo ya mtumiaji maalum kulingana na id yake.

Hatimaye tutatekeleza yaliyoelezewa. Tufanye muundo wa faili ufuatao:

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

Tufanye faili tofauti na data ya watumiaji:

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

Tufanye kiunganishi cha kuonyesha orodha ya watumiaji:

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

Tufanye kiunganishi cha kuonyesha mtumiaji maalum kulingana na id yake:

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