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

শুধুমাত্র ডেটা ফাইলই নয়, কম্পোনেন্টও ইম্পোর্ট করা যায়, যেমনটি আমরা সাধারণ React-এ কাজ করার সময় করতে অভ্যস্ত। চলুন দেখে নেওয়া যাক এটি কিভাবে কাজ করে।

প্রথমে কিছু কনভেনশন প্রবর্তন করি। যেমনটি আপনি ইতিমধ্যেই জানেন, src/app ফোল্ডারে ওয়েবসাইটের পৃষ্ঠাগুলি স্থাপন করা হয়। চলুন চাইল্ড কম্পোনেন্টগুলি src/comp ফোল্ডারে রাখি।

চলুন এখন একটি চাইল্ড কম্পোনেন্টকে কোনো পৃষ্ঠার সাথে সংযুক্ত করি। ধরুন আমাদের এমন একটি পৃষ্ঠা আছে:

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

ধরুন আমাদের নিম্নলিখিত চাইল্ড কম্পোনেন্ট আছে:

export default function Child() {
	return <p>
		child
	</p>;
}

আমাদের চাইল্ড কম্পোনেন্টটি আমাদের পৃষ্ঠায় ইম্পোর্ট করি:

import Child from '@/comp/child/child.jsx';

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

ইম্পোর্ট করা কম্পোনেন্টটি সন্নিবেশ করানো যাক। এর জন্য আমরা কম্পোনেন্ট ভেরিয়েবলের নাম সহ ট্যাগ ব্যবহার করব:

import Child from '@/comp/child/child.jsx';

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

কয়েকটি চাইল্ড কম্পোনেন্ট তৈরি করুন। সেগুলিকে আপনার পৃষ্ঠাগুলিতে ইম্পোর্ট করুন।