CSS-moduler i NextJS

NextJS har allerede innebygd støtte for CSS-moduler. De er separate CSS-filer der klassennavnene er i lokalt scope, noe som unngår konflikter mellom klassennavn fra forskjellige komponenter.

La oss se hvordan vi bruker dem. Anta at vi har en komponent:

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

La oss opprette en CSS-modul for den. For å gjøre dette, i samme mappe lage en fil med endelsen .module.css og et vilkårlig navn. I den skriver vi følgende CSS-klasse:

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

Importer CSS-modulen vår i komponentfilen:

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

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

Og nå bruker vi CSS-klassen på avsnittet inne i komponenten vår:

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

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