Generación dinámica de enlaces en NextJS

Supongamos que tenemos un archivo con datos de usuarios:

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

Vamos a crear dos componentes. El primer componente mostrará una lista de usuarios con enlaces a su descripción detallada. El segundo componente mostrará esta descripción detallada.

Supongamos que en la URL /users/list se muestre la lista de todos los usuarios, y en la URL /users/show/:id - un usuario específico por su id.

Para ello crearemos la siguiente estructura de archivos:

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

Creemos el primer componente, en el cual generaremos dinámicamente enlaces en un bucle, insertando en ellos el id de cada usuario:

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

Hagamos un componente para mostrar un usuario específico por su 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>;
}

Tenemos el siguiente 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 dos componentes. Que el primero muestre la lista de productos en forma de enlaces a la descripción completa del producto. Que el segundo componente muestre la descripción detallada del producto.

Configura el sistema para que, si en la URL se pasa un id de un producto que no existe, se muestre en pantalla un error 404.