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>;
}