Moduli CSS in NextJS

NextJS ha già il supporto integrato per i moduli CSS. Questi sono file CSS separati, in cui i nomi delle classi si trovano in un ambito locale, permettendo di evitare conflitti tra nomi di classi da componenti diversi.

Diamo un'occhiata a come usarli. Supponiamo di avere un componente:

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

Creiamo un modulo CSS per esso. Per farlo, nella stessa cartella creiamo un file con estensione .module.css e un nome a piacere. In esso scriviamo la seguente classe CSS:

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

Importiamo il nostro modulo CSS nel file del componente:

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

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

E ora applichiamo la classe CSS al paragrafo all'interno del nostro componente:

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

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