CSS Modulları NextJS-də

NextJS-də artıq CSS modulları üçün daxili dəstək var. Onlar ayrı-ayrı CSS fayllarıdır, burada sinif adları lokallıq əhatə dairəsində yerləşir, bu da müxtəlif komponentlərdən gələn sinif adları arasında toqquşmaların qarşısını almağa imkan verir.

Gəlin onlardan necə istifadə edəcəyimizə baxaq. Tutaq ki, bizim müəyyən bir komponentimiz var:

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

Gəlin onun üçün bir CSS modulu yaradaq. Bunun üçün eyni qovluqda genişlənməsi .module.css olan və istənilən adı olan bir fayl yaradaq. Orada aşağıdakı CSS sinfini yazaq:

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

CSS modulumuzu komponent faylına idxal edək:

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

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

İndi isə CSS sinfini komponentimizin daxilindəki abzasa tətbiq edək:

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

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