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

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

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

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

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

/src/
- /app/
  - /test/
    - page.jsx
    - data.js

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

export default [
	1, 2, 3, 4, 5,
];

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

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

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

import data from './data.js';

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

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

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

নিম্নলিখিত পোস্টগুলির অ্যারেটি দেওয়া আছে:

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

এই পণ্যগুলো একটি ul তালিকা আকারে প্রদর্শন করুন।

নিম্নলিখিত পণ্যগুলির অ্যারেটি দেওয়া আছে:

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

এই পণ্যগুলো একটি HTML টেবিল আকারে প্রদর্শন করুন।