CSS moduli v NextJS

NextJS že ima vgrajeno podporo za CSS module. To so ločene CSS datoteke, kjer so imena razredov v lokalnem obsegu, kar preprečuje konflikte med imeni razredov iz različnih komponent.

Poglejmo, kako jih uporabljati. Recimo, da imamo neko komponento:

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

Ustvarimo zanjo CSS modul. Za to v isti mapi naredimo datoteko s končnico .module.css in poljubnim imenom. V njej napišimo naslednji CSS razred:

.text {
	color: blue;
}

Uvozimo naš CSS modul v datoteko komponente:

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

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

In sedaj uporabimo CSS razred za odstavek znotraj naše komponente:

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

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

Oblikujte svoje komponente s pomočjo CSS modulov.