Moduły CSS w NextJS

NextJS ma już wbudowaną obsługę modułów CSS. Są to oddzielne pliki CSS, w których nazwy klas znajdują się w lokalnej przestrzeni nazw, co pozwala uniknąć konfliktów między nazwami klas z różnych komponentów.

Spójrzmy, jak z nich korzystać. Załóżmy, że mamy pewien komponent:

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

Stwórzmy dla niego moduł CSS. Aby to zrobić, w tym samym folderze stworzymy plik z rozszerzeniem .module.css i dowolną nazwą. Wpiszmy w nim następującą klasę CSS:

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

Zaimportujmy nasz moduł CSS do pliku komponentu:

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

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

A teraz zastosujmy klasę CSS do akapitu wewnątrz naszego komponentu:

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

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