Delte komponentdata i NextJS

Det oppstår situasjoner der flere komponenter må ha tilgang til de samme dataene. La oss som eksempel si at vi har en rekke med brukere. La oss på en rute vise en liste over brukerne, og på en annen rute med en dynamisk parameter - beskrivelsen av en spesifikk bruker basert på deres id.

La oss implementere det som er beskrevet. Vi lager følgende filstruktur:

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

La oss lage en separat fil med brukerdata:

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

La oss lage en komponent for å vise brukerlisten:

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

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

La oss lage en komponent for å vise en spesifikk bruker basert på deres 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>;
}

Følgende array er gitt:

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

Lag to komponenter. La den første vise en liste over produktene, og den andre - en detaljert beskrivelse av produktet.