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:

export 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:

.text {
	color: blue;
}

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

import 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:

import styles from './test.module.css';

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

Estilize seus componentes usando Módulos CSS.