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:

export 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:

import 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:

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

Gegeben ist das folgende Array:

let 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',
	},
];

Erstellen Sie zwei Komponenten. Lassen Sie die erste eine Liste der Produkte anzeigen, und die zweite eine detaillierte Beschreibung des Produkts.