NextJS da dinamik havolalar yaratish

Faraz qilaylik, bizda foydalanuvchilar ma'lumotlari bilan fayl mavjud:

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

Keling, ikkita komponent yarataylik. Birinchi komponent foydalanuvchilar ro'yxatini ularning batafsil tavsifiga havolalar bilan ko'rsatadi. Ikkinchi komponent esa ushbu batafsil tavsifni chiqaradi.

URL /users/list manzilida barcha foydalanuvchilar ro'yxati ko'rsatilsin, va URL /users/show/:id manzilida - uning id si bo'yicha aniq bir foydalanuvchi.

Buning uchun quyidagi fayl tuzilmasini yaratamiz:

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

Birinchi komponentni yaratamiz, unda har bir foydalanuvchining id sini ularda almashtirib, tsikl davomida havolalarni dinamik ravishda yaratamiz:

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

Uning id si bo'yicha aniq bir foydalanuvchini chiqarish uchun komponent yaratamiz:

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

Quyidagi massiv berilgan:

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

Ikkita komponent yarating. Birinchisi mahsulotlar ro'yxatini mahsulotning to'liq tavsifiga havolalar shaklida ko'rsatsin. Ikkinchi komponent mahsulotning batafsil tavsifini ko'rsatsin.

URL da mavjud bo'lmagan mahsulotning id si uzatilsa, ekranda 404 xatosi ko'rsatilishi uchun qiling.