CSS-модули в NextJS

В NextJS уже есть встроенная поддержка CSS-модулей. Они представляют собой отдельные CSS файлы, в которых имена классов находятся в локальной области видимости, что позволяет избежать конфликтов между именами классов из разных компонентов.

Давайте посмотрим, как ими пользоваться. Пусть у нас есть некоторый компонент:

app/test/page.jsxexport default function Test() {
  return <p>
    text text text
  </p>;
}

Давайте создадим для него CSS-модуль. Для этого в этой же папке сделаем файл с расширением .module.css и произвольным именем. В нем пропишем следующий CSS класс:

app/test/test.module.css.text {
  color: blue;
}

Импортируем наш CSS модуль в файл компонента:

app/test/page.jsximport styles from './test.module.css';

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

А теперь применим CSS класс к абзацу внутри нашего компонента:

app/test/page.jsximport styles from './test.module.css';

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