CSS Modules di NextJS

NextJS sudah memiliki dukungan bawaan untuk CSS Modules. Mereka adalah file CSS terpisah di mana nama kelas berada dalam ruang lingkup lokal, yang memungkinkan untuk menghindari konflik antara nama kelas dari komponen yang berbeda.

Mari kita lihat bagaimana menggunakannya. Misalkan kita memiliki sebuah komponen:

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

Mari buat CSS Module untuknya. Untuk melakukan ini, di folder yang sama buat file dengan ekstensi .module.css dan nama yang arbitrer. Di dalamnya, tulis kelas CSS berikut:

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

Impor CSS module kita ke dalam file komponen:

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

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

Dan sekarang terapkan kelas CSS ke paragraf di dalam komponen kita:

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

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