Data Umum Komponen dalam NextJS

Ada situasi di mana beberapa komponen perlu mengakses data yang sama. Sebagai contoh, mari kita mempunyai array dengan pengguna. Pada satu route kita ingin menunjukkan senarai pengguna, dan pada route lain dengan parameter dinamik - keterangan pengguna tertentu mengikut id-nya.

Mari kita laksanakan apa yang diterangkan. Kita akan buat struktur fail berikut:

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

Mari buat fail berasingan dengan data pengguna:

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

Mari buat komponen untuk menunjukkan senarai pengguna:

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

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

Mari buat komponen untuk output pengguna tertentu mengikut id-nya:

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

Diberi array berikut:

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

Buat dua komponen. Biar pertama menunjukkan senarai produk, dan kedua - keterangan terperinci produk.