CSS moduli u NextJS-u

NextJS već ima ugrađenu podršku za CSS module. Oni predstavljaju zasebne CSS fajlove u kojima su imena klasa u lokalnom opsegu vidljivosti, što omogućava izbegavanje konflikata između imenovanja klasa iz različitih komponenti.

Pogledajmo kako ih koristiti. Recimo da imamo određenu komponentu:

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

Kreirajmo CSS modul za nju. Da bismo to uradili, u istoj fascikli napravićemo fajl sa ekstenzijom .module.css i proizvoljnim imenom. U njemu ćemo napisati sledeću CSS klasu:

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

Importujmo naš CSS modul u fajl komponente:

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

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

A sada primenimo CSS klasu na pasus unutar naše komponente:

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

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