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 модули.