NextJS හි සංරචක සාමාන්ය දත්ත

සමහර අවස්ථාවලදී, සංරචක කිහිපයක් එකම දත්ත වලට ප්‍රවේශ විය යුතුය. උදාහරණයක් ලෙස, අපට පරිශීලකයින් සමඟ යම් අරාවක් ඇතැයි සිතමු. එක් මාර්ගයක අපට පරිශීලකයින්ගේ ලැයිස්තුව පෙන්වීමට අවශ්‍ය වන අතර, ද්‍විතීයික පරාමිතිය සහිත තවත් මාර්ගයක - ඔහුගේ id අනුව නිශ්චිත පරිශීලකයෙකුගේ විස්තරය.

විස්තර කළ දේ ක්‍රියාත්මක කරමු. පහත ගොනු ව්‍යුහය කරමු:

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

පරිශීලක දත්ත සමඟ වෙනම ගොනුවක් කරමු:

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

පරිශීලක ලැයිස්තුව පෙන්වීම සඳහා සංරචකයක් කරමු:

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

export default function List() {
	let list = users.map(user => {
		return <li>
			{user.name}
		</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',
	},
];

සංරචක දෙකක් කරන්න. පළමු සංරචකය නිෂ්පාදන ලැයිස්තුව පෙන්වන්න, දෙවැන්න - නිෂ්පාදනයක විස්තරාත්මක විස්තරය පෙන්වන්න.