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 දෝෂය.