CSS-модули у NextJS

У NextJS већ постоји уграђена подршка за CSS-модуле. Они представљају одвојене CSS фајлове, у којима су имена класа у локалном опсегу видљивости, што омогућава избегавање конфликта између имена класа из различитих компоненти.

Хајде да погледамо како да их користимо. Претпоставимо да имамо неку компоненту:

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

Хајде да креирамо CSS-модул за њу. За то, у овој истој фасцикли направимо фајл са екстензијом .module.css и произвољним именом. У њему ћемо написати следећу CSS класу:

.text {
	color: blue;
}

Импортујмо наш CSS модул у фајл компоненте:

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

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

А сада ћемо применити CSS класу на пасус унутар наше компоненте:

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

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

Стилизујте своје компоненте помоћу CSS модула.