Penjanaan Pautan Dinamik dalam NextJS

Katakan kita mempunyai fail data pengguna:

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

Mari kita buat dua komponen. Komponen pertama akan menunjukkan senarai pengguna dengan pautan ke perihalan terperinci mereka. Komponen kedua akan memaparkan perihalan terperinci itu.

Katakan URL /users/list akan menunjukkan senarai semua pengguna, dan URL /users/show/:id - pengguna tertentu berdasarkan ID mereka.

Untuk melakukan ini, mari buat struktur fail berikut:

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

Mari buat komponen pertama, di mana kita akan menjana pautan secara dinamik dalam gelung, menggantikan 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>;
}

Mari buat komponen untuk memaparkan pengguna tertentu berdasarkan id mereka:

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. Katakan yang pertama menunjukkan senarai produk dalam bentuk pautan ke perihalan penuh produk. Katakan komponen kedua menunjukkan perihalan terperinci produk.

Pastikan bahawa, jika ID produk yang tidak wujud dihantar dalam URL, ralat 404 akan dipaparkan pada skrin.