Dinamiese Generering van Skakels in NextJS

Kom ons sê ons het 'n lêer met gebruikersdata:

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

Laat ons twee komponente maak. Die eerste komponent sal 'n lys van gebruikers met skakels na hul volledige besonderhede wys. Die tweede komponent sal daardie volledige besonderhede vertoon.

Laat die URL /users/list die lys van alle gebruikers wys, en die URL /users/show/:id - 'n spesifieke gebruiker volgens sy id.

Om dit te doen, skep ons die volgende lêerstruktuur:

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

Laat ons die eerste komponent skep, waarin ons dinamies skakels sal genereer in 'n lus, deur die id van elke gebruiker in te voeg:

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

Laat ons 'n komponent maak om 'n spesifieke gebruiker volgens sy id te wys:

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

Die volgende array word gegee:

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

Maak twee komponente. Laat die eerste 'n lys van produkte wys in die vorm van skakels na die produk se volledige beskrywing. Laat die tweede komponent die volledige produkbeskrywing wys.

Sorg dat, indien 'n id van 'n nie-bestaande produk in die URL oorgedra word, 'n 404 fout op die skerm vertoon word.