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 पर - उसके आईडी के आधार पर एक विशिष्ट यूजर।

इसके लिए निम्नलिखित फाइल संरचना बनाएंगे:

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

निम्नलिखित array दी गई है:

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 में गैर-मौजूद उत्पाद की आईडी पास की जाती है, तो स्क्रीन पर 404 error दिखाई दे।