NextJS-এ ডেটা ইম্পোর্ট

NextJS-এ আমরা যেকোনো ফাইল ইম্পোর্ট এবং এক্সপোর্ট করতে পারি। এটি আপনি ইতিমধ্যেই জানতে হবে, যদি আপনি ES6 মডিউল নিয়ে কাজ করে থাকেন। যৌক্তিকভাবে, এটি NextJS-এ কাজ করবে, তবে নতুনদের জন্য এটি সর্বদা স্পষ্ট নয়। সুতরাং আসুন ইম্পোর্ট নিয়ে কথা বলি।

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

এই ফাইলের নাম যেকোনো কিছু হতে পারে। ধরা যাক data.js। এই ফাইলে আমরা ডেটা সহ অ্যারেটি রাখব। এবং page.jsx ফাইলে আমাদের পৃষ্ঠাটি থাকবে, যা NextJS নিজে প্রক্রিয়া করবে এবং ব্রাউজারে পাঠাবে।

অর্থাৎ আমাদের ফাইল স্ট্রাকচারটি হবে নিম্নরূপ:

• /src//app//test/page.jsxdata.js

আসুন আমাদের data.js ফাইলে কিছু ডেটা সহ একটি অ্যারে রাখি:

src/app/test/data.jsexport default [
  1, 2, 3, 4, 5,
];

আসুন page.jsx পৃষ্ঠাটি তৈরি করি:

src/app/test/page.jsxexport default function Test() {
  return <h1>Test</h1>;
}

আসুন আমাদের পৃষ্ঠায় ডেটা অ্যারেটি সংযুক্ত করি:

src/app/test/page.jsximport data from './data.js';

export default function Test() {
  return <h1>Test</h1>;
}

আসুন একটি লুপে এই ডেটাগুলো প্রদর্শন করি:

src/app/test/page.jsximport data from './data.js';

export default function Test() {
  let list = data.map(function(item) {
    return <li>{item}</li>
  });
  
  return <>
    <h1>Test</h1>
    <ul>
      {list}
    </ul>
  </>;
}

posts.jslet posts = [
  'post1',
  'post2',
  'post3',
  'post4',
  'post5',
];

prods.jslet prods = [
  {
    id: 1,
    name: 'prod1',
    cost: 100,
  },
  {
    id: 2,
    name: 'prod2',
    cost: 200,
  },
  {
    id: 3,
    name: 'prod3',
    cost: 300,
  },
];