Módulos CSS no NextJS

O NextJS já tem suporte integrado para Módulos CSS. Eles são arquivos CSS separados, nos quais os nomes das classes estão em um escopo local, o que evita conflitos entre nomes de classes de diferentes componentes.

Vamos ver como usá-los. Suponha que temos um componente:

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

Vamos criar um Módulo CSS para ele. Para isso, na mesma pasta, crie um arquivo com a extensão .module.css e um nome arbitrário. Nele, vamos escrever a seguinte classe CSS:

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

Vamos importar nosso Módulo CSS no arquivo do componente:

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

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

E agora vamos aplicar a classe CSS ao parágrafo dentro do nosso componente:

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

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