Módulos CSS en NextJS

NextJS ya tiene soporte incorporado para módulos CSS. Estos son archivos CSS separados donde los nombres de las clases están en un ámbito local, lo que permite evitar conflictos entre nombres de clases de diferentes componentes.

Veamos cómo usarlos. Supongamos que tenemos un componente:

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

Creemos un módulo CSS para él. Para ello, en esta misma carpeta hagamos un archivo con extensión .module.css y un nombre arbitrario. En él escribamos la siguiente clase CSS:

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

Importemos nuestro módulo CSS en el archivo del componente:

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

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

Y ahora apliquemos la clase CSS al párrafo dentro de nuestro componente:

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

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