Të dhënat e përgjithshme të komponentëve në NextJS

Ka situata kur disa komponentë duhet të kenë qasje në të njëjtat të dhëna. Për shembull, le të kemi një varg me përdorues. Le të themi në një rrugë duam të shfaqim një listë përdoruesish, ndërsa në një rrugë tjetër me parametra dinamikë - përshkrimi i një përdoruesi specifik sipas id të tij.

Le të implementojmë atë që u përshkrua. Le të krijojmë strukturën e mëposhtme të skedarëve:

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

Le të krijojmë një skedar të veçantë me të dhënat e përdoruesve:

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

Le të krijojmë një komponent për të shfaqur listën e përdoruesve:

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

Le të krijojmë një komponent për shfaqjen e një përdoruesi specifik sipas id të tij:

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