NextJS में कंपोनेंट्स के सामान्य डेटा

ऐसी स्थितियाँ होती हैं जब कई कंपोनेंट्स को एक ही डेटा तक पहुंच प्राप्त करनी होती है। उदाहरण के लिए मान लीजिए कि हमारे पास users का कुछ array है। मान लीजिए कि एक route पर हम users की सूची दिखाना चाहते हैं, और dynamic parameter वाले दूसरे route पर - उसके id के आधार पर एक विशिष्ट user का विवरण।

आइए वर्णित को लागू करें। आइए निम्नलिखित file structure बनाएं:

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

आइए users के डेटा के साथ एक अलग file बनाएं:

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

आइए users की सूची दिखाने के लिए एक कंपोनेंट बनाएं:

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

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

आइए उसके id के आधार पर एक विशिष्ट user को output करने के लिए एक कंपोनेंट बनाएं:

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

दो कंपोनेंट्स बनाएं। मान लीजिए पहला products की सूची दिखाता है, और दूसरा - product का विस्तृत विवरण।