การใช้ 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 ได้ง่ายขึ้นนะ! 🚀

การสร้าง Component และการนำไปใช้ใน Next.js

ถ้าคุณเป็นสาย React และกำลังใช้ Next.js เพื่อสร้างเว็บแอป คุณอาจสงสัยว่า "การสร้าง Component และนำไปใช้ใน Next.js ต่างจาก React ปกติยังไง?"

จริง ๆ แล้วหลักการสร้าง Component ใน Next.js ก็คล้ายกับ React ทั่วไป แต่ Next.js มีฟีเจอร์พิเศษบางอย่างที่ช่วยให้การจัดการ Component มีประสิทธิภาพขึ้น

บทความนี้จะพาคุณไปดูทุกมุมของการสร้าง Component ตั้งแต่พื้นฐาน ไปจนถึงแนวทางปฏิบัติที่ดี เพื่อให้คุณสามารถ เขียนโค้ดที่เป็นระเบียบ ใช้ซ้ำได้ และโหลดเร็วขึ้น

Component คืออะไร?

Component เป็นส่วนย่อยของ UI ที่สามารถนำมาใช้ซ้ำได้ ตัวอย่างเช่น

• ปุ่ม (Button)
• แถบนำทาง (Navbar)
• การ์ดแสดงข้อมูล (Card)
• กล่องข้อความ (Input field)

แทนที่เราจะเขียนโค้ดซ้ำ ๆ ทุกหน้า เราสามารถสร้าง Component และนำไปใช้ซ้ำได้ทั่วทั้งเว็บ

1. การสร้าง Component ใน Next.js

1.1 การสร้าง Component แบบพื้นฐาน

ใน Next.js ไฟล์ Component ควรเก็บไว้ในโฟลเดอร์ components/ เพื่อให้โครงสร้างโปรเจกต์ดูเป็นระเบียบ

ตัวอย่างการสร้าง Component Button.js

export default function Button({ text }) {
  return <button className="btn">{text}</button>;
}

Note:

• เราส่งค่า text ผ่าน Props เพื่อให้ปุ่มนี้สามารถแสดงข้อความที่แตกต่างกันได้
• ควรตั้งชื่อไฟล์เป็น ตัวพิมพ์ใหญ่ เช่น Button.js ตามหลักการตั้งชื่อ Component

 

1.2 การใช้ Component ในหน้า Next.js

เมื่อสร้าง Component แล้ว เราสามารถ import และใช้มันในไฟล์อื่น ได้ เช่นใน pages/index.js

ใช้ Button ในหน้า index.js

import Button from '../components/Button';

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js 🚀</h1>
      <Button text="คลิกเลย!" />
      <Button text="สมัครสมาชิก" />
    </div>
  );
}

✅ ผลลัพธ์ที่ได้:

Welcome to Next.js 🚀  
[ คลิกเลย! ]  [ สมัครสมาชิก ]

1.3 การส่งค่า Props ไปยัง Component

Props เป็นค่าที่ส่งจาก Parent Component ไปยัง Child Component
ทำให้เราสามารถปรับแต่ง Component ได้ง่ายขึ้น

ตัวอย่าง Component Card.js รับค่า Props

export default function Card({ title, description }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}


การใช้ Card ใน index.js

import Card from '../components/Card';

export default function Home() {
  return (
    <div>
      <h1>รายการบทความ</h1>
      <Card title="Next.js คืออะไร?" description="Next.js เป็น React Framework ที่ได้รับความนิยมมาก" />
      <Card title="การใช้ API Routes" description="API Routes ช่วยให้เราสร้าง Backend ใน Next.js ได้ง่าย" />
    </div>
  );
}


✅ ผลลัพธ์ที่ได้:

รายการบทความ  
----------------  
Next.js คืออะไร?  
Next.js เป็น React Framework ที่ได้รับความนิยมมาก  

การใช้ API Routes  
API Routes ช่วยให้เราสร้าง Backend ใน Next.js ได้ง่าย  


สังเกต:

• เราสามารถใช้ Card ได้หลายครั้งโดยเปลี่ยนค่า Props
• ทำให้โค้ดดูสะอาด และจัดการง่ายขึ้น

2. การจัดการ Layout ด้วย Component

Next.js มีไฟล์ _app.js ซึ่งช่วยให้เราสร้าง Layout ที่ใช้ซ้ำกันทุกหน้า ได้ง่ายขึ้น

2.1 สร้าง Layout Component

ไฟล์ components/Layout.js

export default function Layout({ children }) {
  return (
    <div>
      <header>🔥 My Website</header>
      <main>{children}</main>
      <footer>⚡ Powered by Next.js</footer>
    </div>
  );
}

2.2 ใช้ Layout ใน _app.js

import Layout from '../components/Layout';
import '../styles/globals.css';

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

✅ ผลลัพธ์ที่ได้

• ทุกหน้าจะมี Header และ Footer โดยอัตโนมัติ

3. การใช้ CSS ใน Component

Next.js รองรับการใช้ CSS ได้หลายแบบ เช่น

•     Global CSS (styles/globals.css)
•     Module CSS (.module.css)
•     Styled Components

3.1 ใช้ Global CSS

ไฟล์: styles/globals.css

.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

ไฟล์: components/Button.js

import '../styles/globals.css';

export default function Button({ text }) {
  return <button className="btn">{text}</button>;
}


✅ ข้อดีของ Global CSS

•     ใช้งานง่าย และใช้ได้กับทุก Component

3.2 ใช้ Module CSS (แนะนำ)

ไฟล์: components/Button.module.css

.btn {
  background-color: red;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

ไฟล์: components/Button.js

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

export default function Button({ text }) {
  return <button className={styles.btn}>{text}</button>;
}


✅ ข้อดีของ Module CSS

• ป้องกันการชนกันของ CSS
• ทำให้โค้ดเป็นระเบียบ

สรุป

หัวข้อ	วิธีใช้งาน
สร้าง Component	ใช้ Function Component (export default function Component() {})
ใช้ Component	import Component from '../components/Component'
ส่งค่าเข้า Component	ใช้ Props (<Component name="John" />)
ใช้ Layout ซ้ำกันทุกหน้า	ใช้ _app.js และ Layout Component
ใช้ CSS ใน Component	ใช้ Global CSS หรือ Module CSS

ข้อดีของการใช้ Component ใน Next.js
✅ โค้ดสะอาดขึ้น
✅ ใช้ซ้ำได้
✅ โหลดเร็วขึ้น (Static Optimization)