CSS moduli u NextJS-u

NextJS već ima ugrađenu podršku za CSS module. Oni predstavljaju zasebne CSS fajlove u kojima su imena klasa u lokalnom opsegu vidljivosti, što omogućava izbegavanje konflikata između imenovanja klasa iz različitih komponenti.

Pogledajmo kako ih koristiti. Recimo da imamo određenu komponentu:

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

Kreirajmo CSS modul za nju. Da bismo to uradili, u istoj fascikli napravićemo fajl sa ekstenzijom .module.css i proizvoljnim imenom. U njemu ćemo napisati sledeću CSS klasu:

.text {
	color: blue;
}

Importujmo naš CSS modul u fajl komponente:

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

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

A sada primenimo CSS klasu na pasus unutar naše komponente:

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

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

Stilizujte svoje komponente pomoću CSS modula.