CSS moduly v NextJS

NextJS již má vestavěnou podporu CSS modulů. Jedná se o samostatné CSS soubory, ve kterých jsou názvy tříd v lokálním oboru platnosti, což umožňuje vyhnout se konfliktům mezi názvy tříd z různých komponent.

Podívejme se, jak je používat. Předpokládejme, že máme nějakou komponentu:

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

Vytvořme pro ni CSS modul. Pro to v této stejné složce vytvoříme soubor s příponou .module.css a libovolným názvem. V něm napíšeme následující CSS třídu:

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

Importujme náš CSS modul do souboru komponenty:

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

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

A nyní aplikujme CSS třídu na odstavec uvnitř naší komponenty:

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

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