CSS moduli v NextJS

NextJS že ima vgrajeno podporo za CSS module. To so ločene CSS datoteke, kjer so imena razredov v lokalnem obsegu, kar preprečuje konflikte med imeni razredov iz različnih komponent.

Poglejmo, kako jih uporabljati. Recimo, da imamo neko komponento:

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

Ustvarimo zanjo CSS modul. Za to v isti mapi naredimo datoteko s končnico .module.css in poljubnim imenom. V njej napišimo naslednji CSS razred:

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

Uvozimo naš CSS modul v datoteko komponente:

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

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

In sedaj uporabimo CSS razred za odstavek znotraj 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>;
}