Dynamische generatie van links in NextJS

Stel we hebben een bestand met gebruikersgegevens:

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

Laten we twee componenten maken. De eerste component zal een lijst van gebruikers tonen met links naar hun gedetailleerde beschrijving. De tweede component zal deze gedetailleerde beschrijving tonen.

Stel dat op URL /users/list de lijst van alle gebruikers wordt getoond, en op URL /users/show/:id - een specifieke gebruiker op basis van zijn id.

Hiervoor maken we de volgende bestandsstructuur:

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

Laten we de eerste component maken, waarin we dynamisch links genereren in een lus, waarbij we de id van elke gebruiker invullen:

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

Laten we een component maken voor het tonen van een specifieke gebruiker op basis van zijn id:

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

Gegeven de volgende array:

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 componenten. Laat de eerste een lijst van producten tonen in de vorm van links naar de volledige beschrijving van het product. Laat de tweede component de gedetailleerde beschrijving van het product tonen.

Zorg ervoor dat, als in de URL een id van een niet-bestaand product wordt doorgegeven, er een 404 foutmelding op het scherm verschijnt.