Дар 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 чоп шавад.