Data Umum Komponen di NextJS

Ada situasi di mana beberapa komponen harus mengakses data yang sama. Sebagai contoh, mari kita memiliki sebuah array dengan pengguna. Misalnya di satu route kita ingin menampilkan daftar pengguna, dan di route lain dengan parameter dinamis - deskripsi pengguna tertentu berdasarkan id-nya.

Mari kita implementasikan hal yang dijelaskan. Kita akan buat struktur file berikut:

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

Mari buat file terpisah 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 menampilkan daftar 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 menampilkan pengguna tertentu berdasarkan 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>;
}

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

Buatlah dua komponen. Misalkan komponen pertama menampilkan daftar produk, dan komponen kedua - deskripsi detail produk.