Fælles komponentdata i NextJS

Der opstår situationer, hvor flere komponenter skal have adgang til de samme data. Lad os som eksempel antage, at vi har et array med brugere. Lad os på én route vise en liste over brugere, og på en anden route med en dynamisk parameter - en beskrivelse af en specifik bruger baseret på deres id.

Lad os implementere det beskrevne. Lad os oprette følgende filstruktur:

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

Lad os oprette en separat fil med brugerdata:

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

Lad os oprette en komponent til visning af brugerlisten:

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

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

Lad os oprette en komponent til udskrivning af en bestemt bruger baseret 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 givet:

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

Opret to komponenter. Lad den første vise en liste over produkter, og den anden - en detaljeret beskrivelse af produktet.