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:

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

.text {
	color: blue;
}

Importiamo il nostro modulo CSS nel file del componente:

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

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

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

Stilizzate i vostri componenti utilizzando i moduli CSS.