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 манзилида эса - ўзининг айдиси бўйича аник фойдаланувчи.

Бунинг учун куйидаги файл тузилимини ясаймиз:

/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 да мавжуд бўлмаган махсулотнинг айдиси юборилса, экранга 404 хато чиқарилишини таъминланг.