Uundaji wa Viungo Vya Kigeni katika NextJS

Tuchukulie tuna faili lenye data ya watumiaji:

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

Tutafanye vipengele viwili. Kipengele cha kwanza kitaonyesha orodha ya watumiaji pamoja na viungo kuelezea maelezo yao kamili. Kipengele cha pili kitaonyesha maelezo hayo kamili.

Tuchukulie kwa URL /users/list itaonyesha orodha ya watumiaji wote, na kwa URL /users/show/:id - mtumiaji maalum kulingana na kitambulisho chake.

Ili kufanya hivyo tutatengeneza muundo ufuatayo wa faili:

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

Tutengeneze kipengele cha kwanza, ambacho kitatengeneza viungo kwa kigeni kwenye kitanzi, tukiwapa id kila mtumiaji:

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

Tufanye kipengele cha kuonyesha mtumiaji maalum kulingana na id yake:

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

Kuna safu ifuatayo:

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

Tengeneza vipengele viwili. Kipengele cha kwanza kionyeshe orodha ya bidhaa kwa mfumo wa viungo kuelezea maelezo kamili ya bidhaa. Kipengele cha pili kionyeshe maelezo kamili ya bidhaa.

Fanya ili, ikiwa kwenye URL kimetumwa kitambulisho cha bidhaa isiyopo, ionekane kosa la 404 kwenye skrini.