CSS Modules dalam NextJS

NextJS sudah mempunyai sokongan terbina dalam untuk CSS Modules. Ia merupakan fail CSS yang berasingan di mana nama kelas berada dalam skop tempatan, membolehkan kita mengelakkan konflik antara nama kelas daripada komponen yang berbeza.

Mari kita lihat bagaimana untuk menggunakannya. Katakan kita mempunyai satu komponen:

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

Mari kita buat CSS Module untuknya. Untuk melakukan ini, dalam folder yang sama buat fail dengan sambungan .module.css dan nama yang sewenang-wenangnya. Di dalamnya, tulis kelas CSS berikut:

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

Import CSS module kita ke dalam fail komponen:

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

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

Dan sekarang gunakan kelas CSS pada perenggan 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>;
}