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

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

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

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

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

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

src/comp/child/child.jsxexport default function Child() {
  return <p>
    child
  </p>;
}

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

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

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

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

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

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