Generazione dinamica di link in NextJS

Supponiamo di avere un file con dati utente:

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

Creiamo due componenti. Il primo componente mostrerà una lista di utenti con link ai loro dettagli. Il secondo componente mostrerà questi dettagli.

Supponiamo che all'URL /users/list venga mostrata la lista di tutti gli utenti, e all'URL /users/show/:id - un utente specifico tramite il suo id.

Per fare questo creiamo la seguente struttura di file:

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

Creiamo il primo componente, in cui genereremo dinamicamente i link in un ciclo, inserendo id di ogni utente:

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

Creiamo un componente per visualizzare un utente specifico tramite il suo 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>;
}

È dato il seguente 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',
	},
];

Crea due componenti. Lascia che il primo mostri la lista dei prodotti sotto forma di link alla descrizione completa del prodotto. Lascia che il secondo componente mostri la descrizione dettagliata del prodotto.

Fai in modo che, se nell'URL viene passato un id di un prodotto inesistente, venga visualizzato un errore 404.