CSS-moodulid NextJS-is

NextJS-s on juba sisseehitatud tugi CSS-moodulitele. Need on eraldiseisvad CSS-failid, kus klassinimed asuvad kohalikus ulatuses, mis võimaldab vältida konflikte klassinimede erinevatest komponentidest.

Vaatame, kuidas neid kasutada. Oletame, et meil on mingi komponent:

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

Loome selle jaoks CSS-mooduli. Selleks teeme samas kaustas faili laiendiga .module.css ja suvalise nimega. Kirjutame sinna järgmise CSS klassi:

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

Impordime oma CSS mooduli komponendi faili:

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

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

Ja nüüd rakendame CSS klassi meie komponendi sees olevale lõigule:

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

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