NextJS да CSS-модуллар

NextJS да CSS-модуллар учун аллақачон ишлов берилган. Улар алохида CSS файллардир, уларда синф номлари локал доирада жойлашган бўлиб, турли компонентлардан келган синф номлари ўртасидаги зиддиятларнинг олдини олади.

Келгила, улардан қандай фойдаланишни кўриб чиқайлик. Бизда қандайдир бир компонент бор дейлик:

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

Унга CSS-модул яратайлик. Бунинг учун ўша папкада кенгайтмаси .module.css бўлган файл яратиб оламиз ва исталган ном берамиз. Унда куйидаги CSS синфини ёзамиз:

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

CSS модулимизни компонент файлига импорт қиламиз:

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

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

Энди эса CSS синфини компонентимиз ичидаги абзацга қўллаймиз:

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

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