Delte komponentdata i NextJS

Det oppstår situasjoner der flere komponenter må ha tilgang til de samme dataene. La oss som eksempel si at vi har en rekke med brukere. La oss på en rute vise en liste over brukerne, og på en annen rute med en dynamisk parameter - beskrivelsen av en spesifikk bruker basert på deres id.

La oss implementere det som er beskrevet. Vi lager følgende filstruktur:

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

La oss lage en separat fil med brukerdata:

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

La oss lage en komponent for å vise brukerlisten:

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

La oss lage en komponent for å vise en spesifikk bruker basert på deres 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',
  },
];