Fælles komponentdata i NextJS

Der opstår situationer, hvor flere komponenter skal have adgang til de samme data. Lad os som eksempel antage, at vi har et array med brugere. Lad os på én route vise en liste over brugere, og på en anden route med en dynamisk parameter - en beskrivelse af en specifik bruger baseret på deres id.

Lad os implementere det beskrevne. Lad os oprette følgende filstruktur:

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

Lad os oprette en separat fil med brugerdata:

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

Lad os oprette en komponent til visning af brugerlisten:

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

Lad os oprette en komponent til udskrivning af en bestemt bruger baseret 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',
  },
];