Gemensamma komponentdata i NextJS

Det finns situationer där flera komponenter behöver åtkomst till samma data. Låt oss som exempel anta att vi har en array med användare. På en route vill vi visa en lista över användare, och på en annan route med en dynamisk parameter - beskrivningen av en specifik användare baserat på dess id.

Låt oss implementera det som beskrivits. Vi skapar följande filstruktur:

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

Vi skapar en separat fil med användardata:

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

Vi skapar en komponent för att visa listan av användare:

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

Vi skapar en komponent för att visa en specifik användare baserat på dess 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',
  },
];