Data ya Pamoja ya Viunganishi katika NextJS

Kuna hali ambapo viunganishi kadhaa vinahitaji kupata data moja. Kwa mfano, hebu tuwe na safu fulani ya watumiaji. Hebu kwenye njia moja tutakaonyesha orodha ya watumiaji, na kwenye njia nyingine yenye kigezo cha nguvu - maelezo ya mtumiaji maalum kulingana na id yake.

Hatimaye tutatekeleza yaliyoelezewa. Tufanye muundo wa faili ufuatao:

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

Tufanye faili tofauti na data ya watumiaji:

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

Tufanye kiunganishi cha kuonyesha orodha ya watumiaji:

import users from '../users.js';

export default function List() {
	let list = users.map(user => {
		return <li>
			{user.name}
		</li>;
	});
	
	return <ul>
		{list}
	</ul>;
}

Tufanye kiunganishi 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 viunganishi viwili. Hebu cha kwanza kionyeshe orodha ya bidhaa, na cha pili - maelezo ya kina ya bidhaa.