Module CSS în NextJS

NextJS are deja suport încorporat pentru modulele CSS. Acestea sunt fișiere CSS separate în care numele claselor se află în domeniul de vizibilitate local, permițând evitarea conflictelor între numele de clase din diferite componente.

Să vedem cum să le folosim. Să presupunem că avem o componentă:

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

Să creăm un modul CSS pentru ea. Pentru aceasta, în același folder creăm un fișier cu extensia .module.css și cu un nume arbitrar. În el scriem următoarea clasă CSS:

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

Importăm modulul nostru CSS în fișierul componentei:

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

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

Și acum aplicăm clasa CSS paragrafului din interiorul componentei noastre:

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

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