NextJS में CSS मॉड्यूल

NextJS में पहले से ही CSS मॉड्यूल के लिए अंतर्निहित समर्थन है। ये अलग-अलग CSS फाइलें होती हैं, जिनमें क्लास के नाम local scope में होते हैं, जिससे विभिन्न कम्पोनेंट्स के क्लास नामों के बीच टकराव से बचा जा सकता है।

आइए देखें कि इनका उपयोग कैसे करते हैं। मान लीजिए कि हमारे पास एक कम्पोनेंट है:

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