การใช้ Tailwind CSS กับ Next.js แบบเข้าใจง่าย

Tailwind CSS เป็นหนึ่งใน CSS Framework ที่มาแรงที่สุดในตอนนี้ เพราะมันทำให้การเขียนสไตล์สะดวกขึ้นแบบสุด ๆ และใช้งานร่วมกับ Next.js ได้อย่างลงตัว วันนี้เราจะมาดูวิธีติดตั้งและใช้งาน Tailwind CSS กับ Next.js ตั้งแต่เริ่มต้นจนถึงเทคนิคการใช้งานให้โค้ดดูสะอาดขึ้น

🌟 ทำไมต้องใช้ Tailwind CSS?

Tailwind CSS ไม่เหมือน CSS Framework ทั่วไป เช่น Bootstrap ที่ให้เราสไตล์องค์ประกอบต่าง ๆ มาพร้อมใช้งานเลย แต่ Tailwind ใช้แนวคิด Utility-First หรือก็คือให้เรากำหนดสไตล์เองผ่าน class ที่เล็ก ๆ เช่น

<button class="bg-blue-500 text-white px-4 py-2 rounded">คลิกเลย!</button>

แปลว่าเราไม่ต้องสร้างไฟล์ CSS แยก ไม่ต้องคิดชื่อ class เอง แค่ใช้ class ที่มีมาให้ก็พอ! 🎉

🛠 วิธีติดตั้ง Tailwind CSS ใน Next.js

1. เปิด terminal แล้วรันคำสั่งติดตั้ง

npx create-next-app@latest my-tailwind-app
cd my-tailwind-app

2. ติดตั้ง Tailwind CSS และแพ็กเกจที่เกี่ยวข้อง

npm install -D tailwindcss postcss autoprefixer

3. สร้างไฟล์ tailwind.config.js

npx tailwindcss init -p

4. แก้ไข tailwind.config.js เพื่อให้ Tailwind ทำงานกับไฟล์ Next.js

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

5. นำเข้า Tailwind CSS ในไฟล์ styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

6. ลองรันเซิร์ฟเวอร์ดู! 🚀

    npm run dev

🎨 เริ่มใช้งาน Tailwind CSS ใน Next.js

ตัวอย่างการใช้งานเบื้องต้น

เปิด pages/index.js แล้วลองใช้ Tailwind CSS

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600">สวัสดี Tailwind CSS + Next.js!</h1>
    </div>
  );
}

🔥 สไตล์ที่ใช้ไปมีอะไรบ้าง?

• min-h-screen → ให้ความสูงเต็มหน้าจอ
• flex items-center justify-center → จัดให้อยู่ตรงกลาง
• bg-gray-100 → พื้นหลังสีเทาอ่อน
• text-4xl → ขนาดตัวอักษรใหญ่
• font-bold → ตัวหนา
• text-blue-600 → สีตัวอักษรฟ้า

ง่ายและเร็วมาก! 😍

🛠 เทคนิคการใช้งาน Tailwind CSS ให้โค้ดสะอาดขึ้น

✨ ใช้ @apply ในไฟล์ CSS

ถ้า class มันเยอะไป เราสามารถใช้ @apply เพื่อรวม class ใน globals.css ได้

/* styles/globals.css */
.btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded shadow-md hover:bg-blue-600;
}

แล้วใช้ใน JSX แบบนี้

<button className="btn">กดเลย!</button>

📌 ใช้ classnames เพื่อจัดการ class ที่ซับซ้อน

ถ้ามีเงื่อนไขว่า class ไหนต้องแสดงหรือไม่แสดง ลองใช้ไลบรารี classnames

npm install classnames

จากนั้นใช้แบบนี้

import classNames from "classnames";

function Button({ primary }) {
  return (
    <button
      className={classNames(
        "px-4 py-2 rounded",
        primary ? "bg-blue-500 text-white" : "bg-gray-300 text-black"
      )}
    >
      กดเลย!
    </button>
  );
}

⚡️ ใช้ Tailwind CSS กับ Components ใน Next.js

สร้างคอมโพเนนต์ปุ่ม

สร้างไฟล์ components/Button.js

export default function Button({ children }) {
  return (
    <button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
      {children}
    </button>
  );
}

แล้วใช้ใน index.js

import Button from "../components/Button";

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <Button>คลิกฉัน!</Button>
    </div>
  );
}

🚀 ใช้ Tailwind CSS กับ Dark Mode

Tailwind รองรับ Dark Mode ได้ง่ายมาก แค่เพิ่ม dark: ข้างหน้าคลาส

<div className="bg-white dark:bg-gray-800 text-black dark:text-white">
  โหมดมืดจ้า!
</div>

แต่ต้องไปแก้ tailwind.config.js นิดหน่อย

module.exports = {
  darkMode: "class", // เปิดใช้ dark mode แบบ manual
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

แล้วใช้ JavaScript เปลี่ยนโหมด

import { useEffect, useState } from "react";

export default function Home() {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    document.documentElement.classList.toggle("dark", darkMode);
  }, [darkMode]);

  return (
    <div className="min-h-screen flex flex-col items-center justify-center">
      <button onClick={() => setDarkMode(!darkMode)} className="px-4 py-2 bg-blue-500 text-white rounded">
        เปลี่ยนโหมด
      </button>
    </div>
  );
}

🎯 Tailwind CSS กับ Next.js ทำอะไรได้อีก?

• ใช้ Animations & Transitions เช่น animate-bounce
• ใช้ Responsive Design ง่าย ๆ เช่น md:bg-red-500
• ใช้ Grid & Flexbox ได้แบบสะดวกสุด ๆ
• ใช้ Custom Theme ปรับแต่งสีหรือฟอนต์ใน tailwind.config.js

🔥 สรุป

• Tailwind CSS ใช้งานง่ายและเร็วมากใน Next.js
• ติดตั้งง่ายแค่ npm install tailwindcss
• ใช้ class utility ได้เลย ไม่ต้องเขียน CSS แยก
• ปรับแต่งธีมเองได้ และรองรับ Dark Mode
• ใช้ร่วมกับ classnames หรือ @apply ให้โค้ดสะอาดขึ้น

ถ้าคุณยังไม่เคยลอง Tailwind 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)

โครงสร้างไฟล์พื้นฐานของ Next.js

ถ้าพูดถึง Next.js หลายคนอาจจะคิดว่ามันเป็น React Framework ที่ใช้ทำ SSR (Server-side Rendering) หรือ SSG (Static Site Generation) ซึ่งก็ถูกแล้ว! แต่ก่อนจะเริ่มใช้งาน Next.js เราต้องมาทำความเข้าใจกับโครงสร้างไฟล์ของมันก่อน เพราะถ้ารู้ว่ามีไฟล์อะไร อยู่ตรงไหน ใช้ทำอะไร ชีวิตจะง่ายขึ้นเยอะ

โครงสร้างไฟล์หลักใน Next.js  

เมื่อเราสร้างโปรเจกต์ Next.js ใหม่ ๆ ด้วยคำสั่ง  

npx create-next-app@latest my-app

หรือ

yarn create next-app my-app
 

เราจะได้โฟลเดอร์ที่มีโครงสร้างพื้นฐานหน้าตาประมาณนี้ 

my-app/
│-- .next/
│-- node_modules/
│-- public/
│-- src/ (บางโปรเจกต์อาจไม่มี)
│-- pages/
│-- components/
│-- styles/
│-- package.json
│-- next.config.js
│-- .gitignore
│-- README.md

1. โฟลเดอร์ .next/

อันนี้เป็นโฟลเดอร์ที่ Next.js ใช้เก็บไฟล์ที่คอมไพล์แล้ว ไม่ต้องไปยุ่งกับมัน เราแค่รู้ว่ามันเป็นไฟล์ที่ Next.js ใช้ตอนรันโปรเจกต์พอ

 

2. โฟลเดอร์ node_modules/

อันนี้คือที่อยู่ของ dependency ต่าง ๆ ที่ถูกติดตั้งผ่าน npm หรือ yarn อย่าไปแก้ไขอะไรในนี้ เพราะมันสร้างขึ้นโดยอัตโนมัติ 

3. โฟลเดอร์ public/

โฟลเดอร์นี้เอาไว้เก็บไฟล์ static เช่น รูปภาพ ไอคอน หรือไฟล์อื่น ๆ ที่ต้องการเข้าถึงโดยตรงผ่าน URL เช่น ถ้ามีไฟล์ logo.png อยู่ใน public/ เราจะเข้าถึงมันได้ที่

http://localhost:3000/logo.png 

ไม่ต้อง import รูปจาก public ในโค้ด แค่ใช้ path ตรง ๆ ได้เลย

 

4. โฟลเดอร์ pages/

นี่คือหัวใจของ Next.js ทุกไฟล์ในโฟลเดอร์นี้จะกลายเป็นหน้าเว็บอัตโนมัติ เช่น 

pages/
│-- index.js  (แสดงที่ /)
│-- about.js  (แสดงที่ /about)
│-- contact.js (แสดงที่ /contact)
│-- blog/
│   ├── index.js   (แสดงที่ /blog)
│   ├── [id].js    (Dynamic Route เช่น /blog/1, /blog/2)
│   ├── new.js     (แสดงที่ /blog/new)

• Static Route → about.js จะกลายเป็น /about
• Dynamic Route → [id].js จะกลายเป็น /blog/:id
• Nested Route → ใช้โฟลเดอร์ย่อย เช่น /blog/new มาจาก pages/blog/new.js

ถ้าใน pages/ มี \_app.js และ \_document.js

• _app.js → ใช้กำหนด Layout หลักของเว็บ
• _document.js → ใช้แก้ไขโครงสร้าง HTML พื้นฐานของ Next.js

 

5. โฟลเดอร์ components/

Next.js ไม่มีบังคับให้ต้องมีโฟลเดอร์นี้ แต่ส่วนใหญ่เราจะสร้างขึ้นมาเพื่อแยก UI ออกเป็น Component เช่น

• Navbar.js
• Footer.js
• Button.js

จากนั้นก็ import ไปใช้ใน pages/ ได้เลย 

 

6. โฟลเดอร์ styles/

เป็นที่เก็บไฟล์ CSS หรือ SCSS เช่น

• globals.css → ใช้กำหนดสไตล์ทั่วทั้งเว็บ
• Home.module.css → เป็น CSS Module ใช้เฉพาะ Component นั้น ๆ

Next.js รองรับ CSS หลายรูปแบบ เช่น

• CSS ปกติ
• SCSS/SASS
• Tailwind CSS (ต้องติดตั้งเพิ่ม)
• CSS-in-JS (เช่น styled-components)

 

7. ไฟล์ package.json

ไฟล์นี้สำคัญมาก! มันบอกว่าโปรเจกต์นี้ใช้ package อะไรบ้าง รวมถึงสคริปต์ที่ใช้รันคำสั่ง เช่น 

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

• next dev → รันโหมดพัฒนา
• next build → สร้างไฟล์สำหรับ production
• next start → รันเซิร์ฟเวอร์ production

 

8. ไฟล์ next.config.js

ไฟล์นี้ใช้ตั้งค่าต่าง ๆ ของ Next.js เช่น

• ปรับแต่ง Webpack
• ตั้งค่า Redirect
• กำหนด Environment Variables

ตัวอย่าง 

module.exports = {
  images: {
    domains: ['example.com'],
  },
  reactStrictMode: true,
}

9. ไฟล์ .gitignore

ใช้กำหนดว่าไฟล์ไหนบ้างที่ไม่ต้องการให้ Git ติดตาม เช่น

node_modules/
.next/
.env 

 

10. ไฟล์ README.md

ไฟล์นี้ใช้สำหรับให้ข้อมูลเกี่ยวกับโปรเจกต์ เช่น วิธีติดตั้ง วิธีใช้งาน ฯลฯ 

Next.js เป็น Framework ที่จัดโครงสร้างไฟล์ให้เป็นระบบระเบียบ ถ้าเราเข้าใจว่าแต่ละโฟลเดอร์และไฟล์ทำหน้าที่อะไร เราจะพัฒนาเว็บได้เร็วขึ้น และเขียนโค้ดได้สะอาดขึ้น