NextJS-এ কম্পোনেন্টগুলির সাধারণ ডেটা

কিছু পরিস্থিতি আছে যখন একাধিক কম্পোনেন্টের একই ডেটা অ্যাক্সেস করার প্রয়োজন হয়। উদাহরণস্বরূপ, ধরা যাক আমাদের কাছে ব্যবহারকারীদের একটি নির্দিষ্ট অ্যারে আছে। ধরা যাক একটি রাউটে আমরা ব্যবহারকারীদের তালিকা দেখাতে চাই, এবং একটি গতিশীল প্যারামিটার সহ অন্য রাউটে - তার id দ্বারা একটি নির্দিষ্ট ব্যবহারকারীর বিবরণ।

আসুন বর্ণিতটি বাস্তবায়ন করি। নিম্নলিখিত ফাইল স্ট্রাকচার তৈরি করি:

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

ব্যবহারকারীদের ডেটা সহ একটি আলাদা ফাইল তৈরি করি:

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

ব্যবহারকারীদের তালিকা দেখানোর জন্য একটি কম্পোনেন্ট তৈরি করি:

app/users/list/page.jsximport users from '../users.js';

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

তার id দ্বারা একটি নির্দিষ্ট ব্যবহারকারী আউটপুট করার জন্য একটি কম্পোনেন্ট তৈরি করি:

app/users/show/[id]/page.jsximport 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>;
}

/app/prods/prods.jslet 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',
  },
];