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