Algemene data vir komponente in NextJS

Daar is situasies waar verskeie komponente toegang tot dieselfde data moet kry. Laat ons byvoorbeeld 'n sekere array met gebruikers hê. Laat ons op een roete die lys gebruikers wys, en op 'n ander roete met 'n dinamiese parameter - die beskrywing van 'n spesifieke gebruiker volgens sy id.

Kom ons implementeer wat beskryf is. Laat ons die volgende lêerstruktuur maak:

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

Laat ons 'n aparte lêer met die gebruikersdata maak:

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

Laat ons 'n komponent maak om die lys gebruikers te wys:

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

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

Laat ons 'n komponent maak om 'n spesifieke gebruiker volgens sy id te toon:

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

Die volgende array word gegee:

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 komponente. Laat die eerste een 'n lys produkte wys, en die tweede een - 'n gedetailleerde beskrywing van die produk.