CSS-модули у NextJS

У NextJS већ постоји уграђена подршка за CSS-модуле. Они представљају одвојене CSS фајлове, у којима су имена класа у локалном опсегу видљивости, што омогућава избегавање конфликта између имена класа из различитих компоненти.

Хајде да погледамо како да их користимо. Претпоставимо да имамо неку компоненту:

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