CSS-moduulit NextJS:ssä

NextJS:ssä on jo sisäänrakennettu tuki CSS-moduuleille. Ne ovat erillisiä CSS-tiedostoja, joissa luokkien nimet ovat paikallisessa näkyvyysalueessa, mikä mahdollistaa nimikkonfliktien välttämisen eri komponenttien luokkanimien välillä.

Katsotaan kuinka niitä käytetään. Oletetaan, että meillä on jokin komponentti:

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

Luodaan sille CSS-moduuli. Tehdään tätä varten samaan kansioon tiedosto, jonka pääte on .module.css ja mielivaltainen nimi. Kirjoitetaan siihen seuraava CSS-luokka:

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

Tuodaan CSS-moduuli komponenttitiedostoon:

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

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

Ja nyt käytetään CSS-luokkaa komponenttimme sisällä olevaan kappaleeseen:

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

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