Dynamické generovanie odkazov v NextJS

Predpokladajme, že máme súbor s údajmi používateľov:

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

Vytvorme dva komponenty. Prvý komponent zobrazí zoznam používateľov s odkazmi na ich detailný popis. Druhý komponent bude zobrazovať tento detailný popis.

Nech URL /users/list zobrazuje zoznam všetkých používateľov, a URL /users/show/:id - konkrétneho používateľa podľa jeho id.

Pre to vytvoríme nasledujúcu súborovú štruktúru:

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

Vytvorme prvý komponent, v ktorom budeme dynamicky generovať odkazy v cykle, vkladajúc do nich id každého používateľa:

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

Vytvorme komponent na zobrazenie konkrétneho používateľa podľa jeho 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>;
}

Dané je nasledujúce pole:

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

Vytvorte dva komponenty. Nech prvý zobrazuje zoznam produktov vo forme odkazov na úplný popis produktu. Nech druhý komponent zobrazuje podrobný popis produktu.

Zabezpečte, aby pri zadaní id neexistujúceho produktu do URL bola zobrazená chyba 404.