NextJS-এ CSS মডিউল

NextJS-এ ইতিমধ্যে CSS মডিউলগুলির অন্তর্নির্মিত সমর্থন রয়েছে। এগুলি পৃথক CSS ফাইল যা ক্লাসের নামগুলি স্থানীয় স্কোপে থাকে, যা বিভিন্ন কম্পোনেন্ট থেকে ক্লাসের নামের মধ্যে দ্বন্দ্ব এড়াতে সাহায্য করে।

চলুন দেখি কিভাবে সেগুলি ব্যবহার করতে হয়। ধরুন আমাদের একটি নির্দিষ্ট কম্পোনেন্ট আছে:

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

এটির জন্য একটি CSS মডিউল তৈরি করা যাক। এর জন্য একই ফোল্ডারে .module.css এক্সটেনশন সহ একটি ফাইল তৈরি করুন এবং যেকোনো নাম দিন। এতে নিম্নলিখিত CSS ক্লাসটি লিখুন:

app/test/test.module.css.text {
  color: blue;
}

আমাদের CSS মডিউলটি কম্পোনেন্ট ফাইলে ইম্পোর্ট করি:

app/test/page.jsximport styles from './test.module.css';

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

এখন CSS ক্লাসটি আমাদের কম্পোনেন্টের ভিতরের প্যারাগ্রাফে প্রয়োগ করি:

app/test/page.jsximport styles from './test.module.css';

export default function Test() {
  return <p className={styles.text}>
    text text text
  </p>;
}