CSS Modules ใน NextJS

NextJS มีการสนับสนุน CSS Modules ในตัวแล้ว พวกมันคือไฟล์ CSS แยกต่างหาก ซึ่งชื่อคลาส อยู่ในขอบเขตเฉพาะที่ (local scope) ช่วยหลีกเลี่ยงความขัดแย้งระหว่าง ชื่อคลาสจากคอมโพเนนต์ต่างๆ

มาดูวิธีใช้งานกัน สมมติว่าเรามีคอมโพเนนต์หนึ่ง:

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

มาสร้าง CSS Module สำหรับมันกัน สำหรับสิ่งนี้ในโฟลเดอร์เดียวกันนี้ ให้สร้างไฟล์ที่มีนามสกุล .module.css และชื่อใดก็ได้ ในนั้นให้เขียนคลาส CSS ต่อไปนี้:

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

นำเข้า CSS Module ของเราในไฟล์ คอมโพเนนต์:

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>;
}