Tạo liên kết động trong NextJS

Giả sử chúng ta có một tệp dữ liệu người dùng:

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

Hãy tạo hai thành phần. Thành phần đầu tiên sẽ hiển thị danh sách người dùng với các liên kết đến mô tả chi tiết của họ. Thành phần thứ hai sẽ hiển thị mô tả chi tiết đó.

Giả sử theo URL /users/list sẽ hiển thị danh sách tất cả người dùng, và theo URL /users/show/:id - một người dùng cụ thể theo id của họ.

Để làm điều này, hãy tạo cấu trúc tệp sau:

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

Hãy tạo thành phần đầu tiên, trong đó chúng ta sẽ tạo động các liên kết trong một vòng lặp, chèn id của mỗi người dùng vào chúng:

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

Hãy tạo một thành phần để hiển thị một người dùng cụ thể theo id của họ:

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

Cho mảng sau:

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

Hãy tạo hai thành phần. Giả sử thành phần đầu tiên hiển thị danh sách sản phẩm dưới dạng các liên kết đến mô tả đầy đủ của sản phẩm. Giả sử thành phần thứ hai hiển thị mô tả chi tiết của sản phẩm.

Hãy thực hiện sao cho, nếu URL truyền vào một id của sản phẩm không tồn tại, một lỗi 404 sẽ được hiển thị trên màn hình.