Dinamiska saišu ģenerēšana NextJS

Pieņemsim, ka mums ir kāds fails ar lietotāju datiem:

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

Izveidosim divus komponentus. Pirmais komponents parādīs lietotāju sarakstu ar saitēm uz to detalizētu aprakstu. Otrais komponents parādīs šo detalizēto aprakstu.

Pieņemsim, ka URL /users/list tiks parādīts visu lietotāju saraksts, bet URL /users/show/:id - konkrēts lietotājs pēc tā id.

Lai to izdarītu, izveidosim šādu failu struktūru:

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

Izveidosim pirmo komponentu, kurā dinamiski ģenerēsim saites cilpā, ievietojot tajās id katram lietotājam:

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

Izveidosim komponentu konkrēta lietotāja attēlošanai pēc tā 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>;
}

Dots šāds masīvs:

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

Izveidojiet divus komponentus. Ļaujiet pirmajam parādīt produktu sarakstu saites veidā uz pilnu produkta aprakstu. Ļaujiet otrajam komponentam parādīt produkta detalizēto aprakstu.

Izdariet tā, lai, ja URL tiek padots neesoša produkta id, ekrānā tiktu parādīta 404 kļūda.