Modules CSS dans NextJS

NextJS a déjà une prise en charge intégrée des modules CSS. Ce sont des fichiers CSS séparés, dans lesquels les noms de classes se trouvent dans une portée locale, ce qui permet d'éviter les conflits entre les noms de classes provenant de différents composants.

Voyons comment les utiliser. Supposons que nous ayons un certain composant :

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

Créons un module CSS pour celui-ci. Pour cela, dans ce même dossier, faisons un fichier avec l'extension .module.css et un nom arbitraire. Écrivons-y la classe CSS suivante :

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

Importons notre module CSS dans le fichier du composant :

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

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

Et maintenant, appliquons la classe CSS au paragraphe à l'intérieur de notre composant :

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

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