Generasi Tautan Dinamis di NextJS

Misalkan kita memiliki file 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 dua komponen. Komponen pertama akan menampilkan daftar pengguna dengan tautan ke deskripsi detail mereka. Komponen kedua akan menampilkan deskripsi detail tersebut.

Misalkan URL /users/list akan menampilkan daftar semua pengguna, dan URL /users/show/:id - pengguna tertentu berdasarkan id-nya.

Untuk melakukan ini, buatlah struktur file berikut:

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

Buatlah komponen pertama, di mana kita akan secara dinamis menghasilkan tautan dalam loop, memasukkan id setiap pengguna ke dalamnya:

import users from '../users.js';
import Link from 'next/link';

export default function List() {
	let list = users.map(user => {
		return <li>
			<Link href={`/users/show/${user.id}`}>
				{user.name}
			</Link>
		</li>;
	});
	
	return <ul>
		{list}
	</ul>;
}

Buatlah 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 yang pertama menampilkan daftar produk dalam bentuk tautan ke deskripsi lengkap produk. Misalkan komponen kedua menampilkan deskripsi detail produk.

Buatlah agar, jika URL mengirimkan id produk yang tidak ada, akan ditampilkan error 404 di layar.