Динамично генерирање на линкови во NextJS

Да претпоставиме дека имаме датотека со податоци за корисници:

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

Да направиме два компоненти. Првиот компонент ќе прикажува листа на корисници со линкови до нивниот детален опис. Вториот компонент ќе го прикажува тој детален опис.

Нека на URL /users/list се прикажува листа на сите корисници, а на URL /users/show/:id - конкретен корисник според неговиот id.

За ова, да ја направиме следната датотечна структура:

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

Да го создадеме првиот компонент, во кој ќе генерираме динамично линкови во циклус, внесувајќи ги id на секој корисник:

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

Да го направиме компонентот за приказ на одреден корисник според неговиот 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>;
}

Дадена е следнава низа:

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

Направете два компоненти. Нека првиот прикажува листа на производи во форма на линкови до целосниот опис на производот. Нека вториот компонент прикажува детален опис на производот.

Направете така што, ако во URL-то се пренесува id на непостоечки производ, на екранот да се прикаже 404 грешка.