Algemene gegevens van componenten in NextJS

Er zijn situaties waarin meerdere componenten toegang moeten hebben tot dezelfde gegevens. Laten we als voorbeeld een array met gebruikers hebben. Stel dat we op één route een lijst met gebruikers willen tonen, en op een andere route met een dynamische parameter - een beschrijving van een specifieke gebruiker op basis van zijn id.

Laten we het beschrevene implementeren. Laten we de volgende bestandsstructuur maken:

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

Laten we een apart bestand maken met gebruikersgegevens:

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

Laten we een component maken voor het tonen van de gebruikerslijst:

import users from '../users.js';

export default function List() {
	let list = users.map(user => {
		return <li>
			{user.name}
		</li>;
	});
	
	return <ul>
		{list}
	</ul>;
}

Laten we een component maken voor het weergeven van een specifieke gebruiker op basis van zijn 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>;
}

De volgende array is gegeven:

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

Maak twee componenten. Laat de eerste een lijst met producten tonen, en de tweede - een gedetailleerde beschrijving van het product.