Gemeinsame Daten von Komponenten in NextJS

Es gibt Situationen, in denen mehrere Komponenten Zugriff auf die gleichen Daten haben müssen. Nehmen wir als Beispiel an, wir haben ein Array mit Benutzern. Auf einer Route möchten wir eine Liste der Benutzer anzeigen, und auf einer anderen Route mit einem dynamischen Parameter - die Beschreibung eines bestimmten Benutzers anhand seiner id.

Lassen Sie uns das Beschriebene implementieren. Wir erstellen die folgende Dateistruktur:

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

Erstellen wir eine separate Datei mit den Benutzerdaten:

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

Erstellen wir eine Komponente zum Anzeigen der Benutzerliste:

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

Erstellen wir eine Komponente für die Ausgabe eines bestimmten Benutzers anhand seiner 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',
  },
];