Algemene gegevens van componenten in NextJS

Er zijn situaties waarin meerdere componenten toegang moeten hebben tot dezelfde gegevens. Laten we als voorbeeld een array met gebruikers hebben. Stel dat we op één route een lijst met gebruikers willen tonen, en op een andere route met een dynamische parameter - een beschrijving van een specifieke gebruiker op basis van zijn id.

Laten we het beschrevene implementeren. Laten we de volgende bestandsstructuur maken:

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

Laten we een apart bestand maken met gebruikersgegevens:

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

Laten we een component maken voor het tonen van de gebruikerslijst:

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

Laten we een component maken voor het weergeven van een specifieke gebruiker op basis van zijn 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',
  },
];