การใช้ CSS ใน Next.js (CSS Modules และ Global CSS)

Next.js เป็นหนึ่งในเฟรมเวิร์กยอดฮิตสำหรับการสร้างเว็บแอปพลิเคชันด้วย React ซึ่งแน่นอนว่าเรื่องของการสไตลิ่ง (styling) ก็เป็นส่วนสำคัญที่เราต้องจัดการให้ดี ใน Next.js เรามีหลายทางเลือกในการใช้ CSS และที่นิยมกันมากคือ CSS Modules และ Global CSS วันนี้เราจะมาทำความเข้าใจทั้งสองแนวทางนี้กันแบบเข้าใจง่าย ๆ

🌍 Global CSS: สไตล์แบบจัดเต็มทั้งเว็บ

Global CSS คือการใช้ไฟล์ CSS ทั่วไปที่เราคุ้นเคยกันดี เหมือนที่ใช้ใน HTML หรือ React ปกติ วิธีนี้เหมาะกับการกำหนดสไตล์ที่ใช้ซ้ำกันทั้งเว็บ เช่น ฟอนต์ พื้นหลัง หรือธีมหลัก

🛠 วิธีใช้ Global CSS ใน Next.js

1. สร้างไฟล์ CSS
    โดยทั่วไป เราจะเก็บไฟล์ Global CSS ไว้ที่ styles/global.css

2. นำเข้าใน _app.js หรือ _app.tsx
    _app.js เป็นไฟล์หลักที่ใช้ควบคุมแอปทั้งหมด ดังนั้นถ้าเราต้องการให้ Global CSS ใช้งานได้ทุกหน้าก็ต้อง import เข้าไปในไฟล์นี้

import '../styles/global.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

3. ใช้งานได้เลย!
    ตอนนี้เราสามารถเขียน CSS ตามปกติใน global.css ได้ เช่น

    body {
      font-family: 'Arial', sans-serif;
      background-color: #f5f5f5;
    }

    h1 {
      color: blue;
    }

❌ ข้อควรระวัง

• Global CSS มีผลต่อทุกหน้า
• ถ้าเผลอไปกำหนดสไตล์ผิด ๆ อาจจะพังทั้งเว็บ!
• ไม่สามารถใช้ CSS Modules ใน _app.js ได้
• Next.js ไม่อนุญาตให้ import CSS Modules ใน _app.js ต้องใช้ Global CSS เท่านั้น

🎯 CSS Modules: สไตล์แบบแยกเฉพาะตัว

CSS Modules เป็นเทคนิคที่ทำให้ CSS มีขอบเขตเฉพาะคอมโพเนนต์ ไม่ต้องกลัวปัญหา CSS ซ้อนทับกัน หรือไปยุ่งกับสไตล์ของส่วนอื่นในเว็บ

🛠 วิธีใช้ CSS Modules ใน Next.js

1. สร้างไฟล์ CSS Modules
    ไฟล์ CSS Modules จะต้องลงท้ายด้วย .module.css เช่น styles/Button.module.css

2. นำเข้าในคอมโพเนนต์

import styles from '../styles/Button.module.css';

function Button() {
  return <button className={styles.button}>คลิกเลย!</button>;
}

export default Button;

3. เขียนสไตล์ในไฟล์ CSS Modules

    /* styles/Button.module.css */
    .button {
      background-color: #ff6347;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

✅ ข้อดีของ CSS Modules

• ไม่มีปัญหา CSS ซ้อนทับกัน เพราะทุกคลาสจะถูกทำให้มีชื่อเฉพาะตัว เช่น Button_button__3fXj9
• แยกสไตล์แต่ละคอมโพเนนต์ได้ง่าย ทำให้โค้ดดูแลรักษาง่ายขึ้น
• สามารถใช้ร่วมกับ SCSS ได้ ถ้าต้องการใช้ SCSS ก็แค่เปลี่ยนนามสกุลไฟล์เป็น .module.scss แล้วติดตั้ง sass
  
  npm install sass

🤔 เลือกใช้ Global CSS หรือ CSS Modules ดี?

วิธี	ข้อดี	ข้อเสีย
Global CSS	ใช้งานง่าย, ใช้กับธีมและสไตล์ทั่วเว็บได้	อาจเกิดปัญหา CSS ซ้อนกัน
CSS Modules	ป้องกัน CSS ทับกัน, เหมาะกับคอมโพเนนต์แยกกัน	ใช้กับ _app.js ไม่ได้

🔥 ใช้ร่วมกันได้!

จริง ๆ แล้ว เราสามารถใช้ Global CSS สำหรับธีมหลัก และใช้ CSS Modules สำหรับคอมโพเนนต์เฉพาะตัวได้ โดยไม่ต้องเลือกอย่างใดอย่างหนึ่ง

💡 เทคนิคน่าสนใจ

ใช้ CSS Modules ร่วมกับ classnames

ถ้าอยากใช้หลายคลาสพร้อมกันใน CSS Modules ลองใช้ไลบรารี classnames

npm install classnames

แล้วใช้แบบนี้ในคอมโพเนนต์:

import styles from '../styles/Card.module.css';
import classNames from 'classnames';

function Card({ highlighted }) {
  return (
    <div className={classNames(styles.card, { [styles.highlighted]: highlighted })}>
      นี่คือการ์ด!
    </div>
  );
}

export default Card;

/* styles/Card.module.css */
.card {
  padding: 20px;
  border: 1px solid #ddd;
}

.highlighted {
  background-color: yellow;
}

🔥 สรุป

• Global CSS ใช้สำหรับธีมหลักของเว็บ
• CSS Modules เหมาะกับสไตล์ที่ต้องการแยกเฉพาะคอมโพเนนต์
• สามารถใช้ Global CSS และ CSS Modules ร่วมกันได้
• ถ้าต้องการใช้หลายคลาสใน CSS Modules ให้ใช้ classnames

หวังว่าบทความนี้จะช่วยให้คุณเข้าใจการใช้ CSS ใน Next.js ได้ง่ายขึ้นนะ! 🚀