Gemensamma komponentdata i NextJS

Det finns situationer där flera komponenter behöver åtkomst till samma data. Låt oss som exempel anta att vi har en array med användare. På en route vill vi visa en lista över användare, och på en annan route med en dynamisk parameter - beskrivningen av en specifik användare baserat på dess id.

Låt oss implementera det som beskrivits. Vi skapar följande filstruktur:

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

Vi skapar en separat fil med användardata:

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

Vi skapar en komponent för att visa listan av användare:

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

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

Vi skapar en komponent för att visa en specifik användare baserat på dess 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öljande array ges:

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

Skapa två komponenter. Låt den första visa en lista över produkterna, och den andra - en detaljerad beskrivning av produkten.