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

দুটি কম্পোনেন্ট তৈরি করুন। প্রথমটি যেন পণ্যগুলির তালিকা দেখায়, এবং দ্বিতীয়টি - পণ্যের বিস্তারিত বিবরণ।