CSS-moduler i NextJS

NextJS har allerede indbygget understøttelse af CSS-moduler. De er separate CSS-filer, hvor klassenavne er i et lokalt scope, hvilket undgår konflikter mellem klassenavne fra forskellige komponenter.

Lad os se på, hvordan man bruger dem. Antag, at vi har en komponent:

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

Lad os oprette et CSS-modul til den. For at gøre dette, i samme mappe, lav en fil med endelsen .module.css og et vilkårligt navn. I den skriver vi følgende CSS-klasse:

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

Vi importerer vores CSS-modul i komponentfilen:

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

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

Og nu anvender vi CSS-klassen på afsnittet inde i vores komponent:

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

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