CSS-modules in NextJS

NextJS heeft ingebouwde ondersteuning voor CSS-modules. Dit zijn afzonderlijke CSS-bestanden waarin klassennamen zich in een lokale scope bevinden, wat conflicten tussen klassennamen uit verschillende componenten voorkomt.

Laten we eens kijken hoe we ze kunnen gebruiken. Stel dat we een bepaalde component hebben:

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

Laten we er een CSS-module voor maken. Hiervoor maken we in dezelfde map een bestand met de extensie .module.css en een willekeurige naam. Daarin schrijven we de volgende CSS-klasse:

.text {
	color: blue;
}

We importeren onze CSS-module in het bestand van de component:

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

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

En nu passen we de CSS-klasse toe op de alinea binnen onze component:

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

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

Styl je componenten met CSS-modules.