การใช้ Image Optimization ใน Next.js: โหลดไว SEO ดี ประหยัดแบนด์วิธ!

เคยเจอปัญหาเว็บโหลดช้าเพราะรูปภาพขนาดใหญ่หรือเปล่า? 📷 ถ้าใช่ Next.js มีฟีเจอร์ Image Optimization ที่ช่วยให้รูปภาพโหลดเร็วขึ้น อัตโนมัติ ไม่ต้องไปใช้พวก TinyPNG หรือ Cloudinary เองเลย

🌟 ทำไมต้องใช้ Image Optimization ใน Next.js?

✅ ลดขนาดไฟล์รูปภาพ โดยอัตโนมัติ 📉
✅ รองรับการแปลงเป็น WebP ที่โหลดเร็วกว่า JPEG/PNG ⚡
✅ รองรับ Lazy Loading โหลดเฉพาะตอนที่รูปจะถูกแสดง 💤
✅ รองรับการปรับขนาดรูปแบบอัตโนมัติ ตามหน้าจอผู้ใช้ 📱
✅ ทำให้ SEO ดีขึ้น เพราะเว็บโหลดเร็ว 🚀

วันนี้เราจะมาเรียนรู้วิธีใช้ Next.js Image Optimization อย่างมือโปร 💪

📌 เริ่มต้นใช้งาน Image Optimization ใน Next.js

Next.js มีคอมโพเนนต์ <Image> ที่ช่วยจัดการรูปภาพอัตโนมัติ ให้ใช้แทน <img> ปกติ

📂 สร้างไฟล์ pages/index.js แล้วใส่โค้ดนี้

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <h1>🚀 ใช้ Next.js Image Optimization</h1>
      <Image
        src="/images/sample.jpg"
        alt="รูปตัวอย่าง"
        width={500}
        height={300}
      />
    </div>
  );
}

🔹 อธิบายโค้ด

• <Image> – ใช้แทน <img>
• src – พาธของรูปภาพ (ใช้ /public/images/sample.jpg)
• alt – คำอธิบายรูป (สำคัญต่อ SEO)
• width & height – กำหนดขนาดรูป (Next.js ปรับขนาดให้เหมาะสม)

🎯 เปรียบเทียบ <Image> กับ <img>

คุณสมบัติ	<Image> (Next.js)	<img> (HTML)
Lazy Loading	✅ อัตโนมัติ	❌ ต้องเพิ่ม loading="lazy" เอง
ปรับขนาดรูปอัตโนมัติ	✅	❌
รองรับ WebP	✅	❌
SEO Friendly	✅	❌

💡 สรุป: ใช้ <Image> จะช่วยให้รูปภาพโหลดเร็วขึ้น โดยที่เราไม่ต้องทำอะไรเพิ่มเลย!

🖼 ใช้ Image Optimization กับรูปภาพจากภายนอก

ถ้ารูปภาพของคุณ อยู่ใน CDN หรือโดเมนอื่น ต้องเพิ่มโดเมนนั้นใน next.config.js

📂 แก้ไขไฟล์ next.config.js

module.exports = {
  images: {
    domains: ['example.com', 'cdn.example.com'],
  },
};

🔹 ตัวอย่างการใช้รูปจาก CDN

<Image
  src="https://example.com/image.jpg"
  width={500}
  height={300}
  alt="รูปจาก CDN"
/>

💡 ทำไมต้องเพิ่มโดเมนใน next.config.js?

Next.js ต้องการควบคุมความปลอดภัยและประสิทธิภาพ จึงไม่ให้โหลดรูปจากภายนอกโดยตรง ถ้าไม่ระบุไว้

📏 ปรับขนาดรูปภาพอัตโนมัติ

สามารถใช้ layout เพื่อให้รูปภาพปรับขนาดตามคอนเทนต์ได้

🔹 layout="responsive" (ขนาดเปลี่ยนตามหน้าจอ)

<Image
  src="/images/sample.jpg"
  alt="รูปตัวอย่าง"
  layout="responsive"
  width={16}
  height={9}
/>

📌 ภาพจะปรับขนาดตามสัดส่วน 16:9 โดยอัตโนมัติ

🔹 layout="intrinsic" (ขนาดเท่าต้นฉบับ)

<Image
  src="/images/sample.jpg"
  alt="รูปตัวอย่าง"
  layout="intrinsic"
  width={500}
  height={300}
/>

📌 ภาพจะใช้ขนาดจริงของไฟล์ และขยายตามหน้าจอ

🔹 layout="fill" (ให้รูปเต็มพื้นที่ของ container)

<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <Image
    src="/images/sample.jpg"
    alt="รูปตัวอย่าง"
    layout="fill"
    objectFit="cover"
  />
</div>

📌 รูปจะถูกยืดให้เต็ม container และ objectFit="cover" ป้องกันการเสียสัดส่วน

⚡ เปลี่ยนฟอร์แมตรูปเป็น WebP อัตโนมัติ

Next.js รองรับ WebP โดยไม่ต้องแปลงเอง!

<Image
  src="/images/sample.jpg"
  alt="รูปตัวอย่าง"
  width={500}
  height={300}
  quality={80}
/>

📌 Next.js จะสร้างรูปแบบ WebP อัตโนมัติถ้าผู้ใช้รองรับ

🔄 ใช้ Blur Effect สำหรับรูปโหลดช้า

Next.js มี blur effect ช่วยให้รูปที่โหลดช้า ไม่ทำให้หน้าเว็บดูแย่

<Image
  src="/images/sample.jpg"
  alt="รูปตัวอย่าง"
  width={500}
  height={300}
  placeholder="blur"
  blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
/>

📌 ภาพจะมีเอฟเฟกต์เบลอจนกว่าจะโหลดเสร็จ

🔥 ใช้ Next.js Image API

Next.js มี API สำหรับ Resize และ Optimize รูป อัตโนมัติ

📌 ตัวอย่างการใช้ API

https://yourdomain.com/_next/image?url=/images/sample.jpg&w=500&q=75

🔹 w=500 → ปรับขนาดรูปเป็น 500px
🔹 q=75 → ลดคุณภาพให้เหลือ 75%

📌 สรุป

✅ ใช้ <Image> แทน <img> เพื่อให้เว็บโหลดเร็ว
✅ รองรับ Lazy Loading และ WebP อัตโนมัติ
✅ ปรับขนาดรูป ให้เหมาะสมกับทุกอุปกรณ์
✅ ใช้ layout ต่างๆ เพื่อให้รูปแสดงผลตามต้องการ
✅ ใช้ API ของ Next.js ช่วย Optimize รูปให้เบาและเร็ว

อยากให้เว็บโหลดเร็ว + SEO ดีขึ้น? ใช้ Next.js Image Optimization เลย! 🚀

การใช้ Toast Notifications ใน Next.js: แจ้งเตือนแบบโปร ไม่ต้องรีโหลดหน้า

เคยเจอปัญหานี้ไหม? กดปุ่มแล้วไม่รู้ว่าระบบทำงานหรือยัง ส่งฟอร์มแล้วไม่แน่ใจว่าผ่านหรือไม่ หรืออยากให้เว็บมีแจ้งเตือนที่ดูดีแต่ไม่อยากเขียนเองให้ยุ่งยาก

วันนี้เราจะมาเรียนรู้วิธีใช้ Toast Notifications ใน Next.js แบบง่ายๆ โดยใช้ react-hot-toast ไลบรารีสุดเทพที่ช่วยให้แจ้งเตือนแบบลื่นไหล ดูดี และใช้งานง่าย

🔥 ทำไมต้องใช้ Toast Notifications?

Toast Notifications คือ ข้อความแจ้งเตือนแบบชั่วคราว ที่แสดงขึ้นมาในเว็บเมื่อมีเหตุการณ์บางอย่างเกิดขึ้น เช่น:

✅ แจ้งเตือนเมื่อทำรายการสำเร็จ ✅
✅ แจ้งเตือนข้อผิดพลาด (เช่น ฟอร์มไม่ถูกต้อง) ❌
✅ แจ้งเตือนระหว่างโหลดข้อมูล ⏳

Toast ดีๆ ควรเป็น Non-intrusive (ไม่รบกวน) และ Auto-dismiss (หายไปเอง) เพื่อไม่ให้ผู้ใช้รำคาญ

🚀 ติดตั้ง react-hot-toast ใน Next.js

เราจะใช้ react-hot-toast เพราะมันใช้ง่ายและทำงานได้ดีกับ Next.js

ติดตั้งแพ็กเกจ

npm install react-hot-toast

หรือถ้าใช้ Yarn

yarn add react-hot-toast

🎨 ตั้งค่า ToastProvider

ToastProvider เป็นคอมโพเนนต์ที่ช่วยให้เราสามารถใช้ toast ได้ทั่วแอป ต้องเพิ่มใน _app.js

แก้ไข pages/_app.js

import { Toaster } from 'react-hot-toast';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Toaster position="top-right" reverseOrder={false} />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

🔹 position="top-right" – ให้ toast แสดงที่มุมขวาบน
🔹 reverseOrder={false} – ให้ข้อความใหม่ขึ้นด้านล่าง

🎯 ใช้งาน toast แจ้งเตือน

react-hot-toast ใช้งานง่ายมาก มีฟังก์ชันหลักๆ เช่น

• toast.success("ข้อความ") ✅ แจ้งเตือนสำเร็จ
• toast.error("ข้อความ") ❌ แจ้งเตือนข้อผิดพลาด
• toast.loading("กำลังโหลด...") ⏳ แจ้งเตือนระหว่างโหลด
• toast.dismiss() 🚫 ลบ toast ที่กำลังแสดง

💡 ตัวอย่างการใช้งาน toast ในปุ่ม

สร้างไฟล์ pages/index.js และเพิ่มปุ่มที่กดแล้วแจ้งเตือน

import toast from 'react-hot-toast';

export default function Home() {
  const notifySuccess = () => toast.success('บันทึกข้อมูลสำเร็จ! 🎉');
  const notifyError = () => toast.error('เกิดข้อผิดพลาด ❌');
  const notifyLoading = () => {
    const toastId = toast.loading('กำลังโหลดข้อมูล...');
    setTimeout(() => toast.success('โหลดสำเร็จ ✅', { id: toastId }), 2000);
  };

  return (
    <div className="p-10">
      <h1 className="text-2xl font-bold mb-4">🔔 ทดลองใช้ Toast Notifications</h1>
      <button onClick={notifySuccess} className="bg-green-500 text-white px-4 py-2 mr-2 rounded">✅ แจ้งเตือนสำเร็จ</button>
      <button onClick={notifyError} className="bg-red-500 text-white px-4 py-2 mr-2 rounded">❌ แจ้งเตือนข้อผิดพลาด</button>
      <button onClick={notifyLoading} className="bg-blue-500 text-white px-4 py-2 rounded">⏳ แจ้งเตือนระหว่างโหลด</button>
    </div>
  );
}

🔍 อธิบายโค้ด:

• toast.success() ใช้แจ้งเตือนเมื่อทำรายการสำเร็จ
• toast.error() ใช้แจ้งเตือนเมื่อเกิดข้อผิดพลาด
• toast.loading() ใช้แจ้งเตือนว่ากำลังโหลดข้อมูล และอัปเดตเป็น toast.success() หลังจากโหลดเสร็จ

🎨 ปรับแต่งสไตล์ Toast

เราสามารถ กำหนดสไตล์ ของ toast ได้ เช่น เปลี่ยนสีพื้นหลัง เปลี่ยนไอคอน หรือกำหนดเวลาหายไปเอง

1️⃣ กำหนดเวลาให้ toast หายไปอัตโนมัติ

toast.success('บันทึกเรียบร้อย!', {
  duration: 5000, // แสดงผล 5 วินาที
});

2️⃣ เปลี่ยนสีและไอคอน

toast('🛑 คำเตือน: โปรดตรวจสอบข้อมูล', {
  style: {
    border: '1px solid red',
    padding: '16px',
    color: 'red',
  },
});

3️⃣ กำหนด animation

toast.success('ทำสำเร็จ!', {
  style: { animation: 'bounce 1s ease-in-out' },
});

🔄 ใช้ Toast กับ API Requests

ลองใช้ toast กับ API จริงๆ เช่น fetch()

const fetchData = async () => {
  const toastId = toast.loading('กำลังโหลดข้อมูล...');

  try {
    const response = await fetch('/api/data');
    const result = await response.json();

    toast.success('โหลดข้อมูลสำเร็จ!', { id: toastId });
  } catch (error) {
    toast.error('โหลดข้อมูลล้มเหลว', { id: toastId });
  }
};

🔍 อธิบาย:

• toast.loading() แจ้งเตือนว่ากำลังโหลด
• ถ้าโหลดสำเร็จ → toast.success()
• ถ้าเกิดข้อผิดพลาด → toast.error()

📌 ใช้ Toast กับฟอร์ม

ในฟอร์มเราสามารถใช้ toast แจ้งเตือนว่า กรอกข้อมูลถูกต้องหรือไม่

const handleSubmit = (e) => {
  e.preventDefault();
 
  if (!email) {
    toast.error('กรุณากรอกอีเมล!');
    return;
  }

  toast.success('ส่งข้อมูลสำเร็จ!');
};

🏆 สรุป

✅ react-hot-toast ใช้งานง่ายมาก
✅ ใช้กับ API Requests, ฟอร์ม และปุ่มต่างๆ ได้
✅ ปรับแต่งสไตล์และอนิเมชันได้
✅ ไม่ต้องรีโหลดหน้า ก็แจ้งเตือนได้แบบสวยๆ

พร้อมใช้ Toast แจ้งเตือนให้เว็บของคุณดูโปรขึ้นหรือยัง? 🚀

การสร้าง Dashboard UI ใน Next.js: ทำง่าย ใช้งานจริง แบบโปรๆ

เคยไหม? เวลาจะสร้าง Dashboard สวยๆ ในเว็บแอปพลิเคชันแต่ไม่รู้จะเริ่มตรงไหน? วันนี้เราจะมาลุยกันว่า Next.js จะช่วยให้เราสร้าง Dashboard UI ที่สวยงาม ใช้งานได้จริง และมีประสิทธิภาพได้ยังไง

🔥 ทำไมต้องใช้ Next.js สำหรับ Dashboard?

Next.js เป็นหนึ่งใน React Framework ที่เหมาะกับการสร้าง Dashboard มากๆ เพราะมันมีฟีเจอร์ที่ช่วยให้การพัฒนาเร็วขึ้น เช่น

✅ Server-side Rendering (SSR) – โหลดข้อมูลแบบเร็วจี๋ 🚀
✅ Static Site Generation (SSG) – ลดโหลดเซิร์ฟเวอร์และเพิ่มความเร็ว
✅ API Routes – จัดการข้อมูลจาก Backend ได้ในตัว
✅ การรองรับ Tailwind CSS, MUI, Ant Design – ทำ UI ได้ง่ายขึ้น

🛠️ เริ่มต้นโปรเจกต์ Dashboard ด้วย Next.js

1️⃣ ติดตั้ง Next.js

ถ้ายังไม่มีโปรเจกต์ Next.js ให้สร้างใหม่ก่อน

npx create-next-app@latest my-dashboard
cd my-dashboard
npm install

หรือถ้าใช้ Yarn

yarn create next-app my-dashboard
cd my-dashboard
yarn install

2️⃣ ติดตั้ง UI Library (Tailwind CSS หรือ MUI)

เราจะใช้ Tailwind CSS เพราะมันเบาและทำให้ดีไซน์ง่าย

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

แล้วเพิ่ม Tailwind ลงในไฟล์ tailwind.config.js

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

จากนั้นใส่ Tailwind ลงใน styles/globals.css

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

🎨 สร้าง Layout หลักของ Dashboard

ปกติ Dashboard จะมี

✅ Sidebar
✅ Navbar
✅ Content Area

เราจะสร้าง Layout หลักที่ใช้ทั่วแอป

1️⃣ สร้างไฟล์ components/Layout.js

import Sidebar from './Sidebar';
import Navbar from './Navbar';

export default function Layout({ children }) {
  return (
    <div className="flex h-screen">
      <Sidebar />
      <div className="flex flex-col flex-1">
        <Navbar />
        <main className="p-4">{children}</main>
      </div>
    </div>
  );
}

2️⃣ สร้าง Sidebar (components/Sidebar.js)

import Link from 'next/link';

export default function Sidebar() {
  return (
    <div className="w-64 bg-gray-800 text-white h-screen p-5">
      <h2 className="text-xl font-bold mb-5">Dashboard</h2>
      <ul>
        <li className="mb-2">
          <Link href="/" className="block p-2 hover:bg-gray-700 rounded">🏠 หน้าหลัก</Link>
        </li>
        <li className="mb-2">
          <Link href="/analytics" className="block p-2 hover:bg-gray-700 rounded">📊 Analytics</Link>
        </li>
        <li className="mb-2">
          <Link href="/settings" className="block p-2 hover:bg-gray-700 rounded">⚙️ Settings</Link>
        </li>
      </ul>
    </div>
  );
}

3️⃣ สร้าง Navbar (components/Navbar.js)

export default function Navbar() {
  return (
    <div className="bg-white shadow-md p-4 flex justify-between">
      <h1 className="text-lg font-bold">Dashboard</h1>
      <div>👤 User</div>
    </div>
  );
}

4️⃣ ใช้ Layout ในหน้า pages/_app.js

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

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

export default MyApp;

📊 สร้างหน้า Dashboard พร้อมกราฟ

ใน Dashboard จริงๆ มักจะมี กราฟ และ ตารางข้อมูล เราจะใช้ Recharts เพื่อแสดงกราฟ

1️⃣ ติดตั้ง Recharts

npm install recharts

2️⃣ สร้างหน้า pages/index.js

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { month: 'Jan', sales: 4000 },
  { month: 'Feb', sales: 3000 },
  { month: 'Mar', sales: 5000 },
  { month: 'Apr', sales: 7000 },
];

export default function Dashboard() {
  return (
    <div>
      <h1 className="text-2xl font-bold mb-4">📈 สถิติยอดขาย</h1>
      <div className="bg-white p-4 shadow-md">
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={data}>
            <XAxis dataKey="month" />
            <YAxis />
            <Tooltip />
            <Line type="monotone" dataKey="sales" stroke="#8884d8" strokeWidth={2} />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}

📌 เพิ่มตารางข้อมูล

เราจะใช้ TanStack Table เพื่อแสดงข้อมูลในรูปแบบตาราง

1️⃣ ติดตั้ง TanStack Table

npm install @tanstack/react-table

2️⃣ เพิ่มตารางใน pages/index.js

import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';

const data = [
  { id: 1, name: 'John Doe', role: 'Admin' },
  { id: 2, name: 'Jane Smith', role: 'Editor' },
];

const columns = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'ชื่อ' },
  { accessorKey: 'role', header: 'บทบาท' },
];

export default function Dashboard() {
  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });

  return (
    <div>
      <h1 className="text-2xl font-bold mb-4">👥 ผู้ใช้งาน</h1>
      <table className="border-collapse border border-gray-300 w-full">
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id} className="border p-2 bg-gray-100">
                  {flexRender(header.column.columnDef.header, header.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id} className="border p-2">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

🎯 สรุป

✅ สร้าง Dashboard UI ใน Next.js ได้ง่าย
✅ ใช้ Tailwind CSS ทำให้ UI สวยแบบไม่ต้องเขียน CSS เอง
✅ ใช้ Recharts และ TanStack Table เพื่อแสดงข้อมูลได้อย่างมืออาชีพ

พร้อมสร้าง Dashboard ของคุณเองแล้วหรือยัง?

การแสดงผลตารางใน Next.js ด้วย TanStack Table: ง่าย สวย และยืดหยุ่นสุดๆ

ถ้าคุณเคยต้องทำตารางใน React หรือ Next.js แล้วรู้สึกว่ามันยุ่งยากไปหมด ไม่ว่าจะเป็นการจัดการข้อมูล การกรอง (filtering) การเรียงลำดับ (sorting) หรือการแบ่งหน้า (pagination) วันนี้เราจะมาแนะนำ TanStack Table (หรือชื่อเดิมคือ React Table) ที่จะช่วยให้คุณสร้างตารางขั้นเทพได้แบบง่ายๆ

ทำไมต้องใช้ TanStack Table?

ในโปรเจกต์ที่ต้องแสดงข้อมูลในรูปแบบตาราง เช่น รายการคำสั่งซื้อ, รายการผู้ใช้ หรือข้อมูลสถิติต่างๆ เราต้องการฟีเจอร์พวกนี้:

✅ การจัดการข้อมูลที่ยืดหยุ่น (เช่น ใช้ API ดึงข้อมูลมาแสดง)
✅ Sorting, Filtering, และ Pagination แบบไม่ต้องเขียนเอง
✅ รองรับการใช้งานกับ Next.js และ SSR (Server-side Rendering)

TanStack Table ทำได้หมด! 🎉

ติดตั้ง TanStack Table

ก่อนอื่น เราต้องติดตั้งไลบรารีก่อน

npm install @tanstack/react-table

หรือถ้าใช้ Yarn

yarn add @tanstack/react-table

ตัวอย่างการใช้งานพื้นฐาน

มาลองสร้างตารางง่ายๆ กันก่อน โดยใช้ข้อมูลแบบ static

1. ตั้งค่าข้อมูลและคอลัมน์

const data = [
  { id: 1, name: 'John Doe', age: 28, email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', age: 32, email: 'jane@example.com' },
  { id: 3, name: 'Bob Brown', age: 24, email: 'bob@example.com' },
];

const columns = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'ชื่อ' },
  { accessorKey: 'age', header: 'อายุ' },
  { accessorKey: 'email', header: 'อีเมล' },
];

อธิบาย:

• data คือข้อมูลที่เราจะเอามาแสดง
• columns กำหนดโครงสร้างของตาราง ใช้ accessorKey เพื่อระบุคีย์ของข้อมูล

2. ใช้ TanStack Table เพื่อแสดงตาราง

import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';

export default function MyTable() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table border="1">
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id}>{flexRender(header.column.columnDef.header, header.getContext())}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

สรุปโค้ด:

• useReactTable() ใช้สร้างตารางจาก data และ columns
• getCoreRowModel() ใช้เพื่อจัดการโครงสร้างของข้อมูล
• flexRender() ช่วยให้เราสามารถเรนเดอร์ค่าที่กำหนดใน columns ได้

เพิ่ม Sorting (เรียงลำดับ)

ถ้าอยากให้ตารางสามารถเรียงลำดับ (sorting) ได้ ให้เพิ่ม getSortedRowModel()

import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';

export default function MyTable() {
  const [sorting, setSorting] = React.useState([]);
 
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
    state: { sorting },
  });

  return (
    <table border="1">
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id} onClick={() => header.column.getToggleSortingHandler()?.()}>
                {flexRender(header.column.columnDef.header, header.getContext())}
                {header.column.getIsSorted() === 'asc' ? ' 🔼' : header.column.getIsSorted() === 'desc' ? ' 🔽' : ''}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

ตอนนี้เราสามารถคลิกที่หัวตารางเพื่อเรียงข้อมูลได้แล้ว! 🎉

เพิ่ม Pagination (แบ่งหน้า)

ถ้าข้อมูลเยอะๆ เราอาจต้องการ pagination เพื่อให้ผู้ใช้สามารถเลื่อนดูหน้าอื่นๆ ได้

import { useReactTable, getCoreRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';

export default function MyTable() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });

  return (
    <div>
      <table border="1">
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id}>{flexRender(header.column.columnDef.header, header.getContext())}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <div>
        <button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
          ก่อนหน้า
        </button>
        <span> หน้า {table.getState().pagination.pageIndex + 1} </span>
        <button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
          ถัดไป
        </button>
      </div>
    </div>
  );
}

สรุป

✅ TanStack Table ช่วยให้สร้างตารางใน Next.js ได้ง่ายและยืดหยุ่น
✅ รองรับ Sorting, Pagination, Filtering
✅ ทำงานได้ดีทั้ง Client-side และ Server-side Rendering

ถ้าคุณต้องการตารางที่เร็วและยืดหยุ่น TanStack Table คือตัวเลือกที่ดีสุด! 

การจัดการฟอร์มใน Next.js ด้วย React Hook Form: ใช้ง่าย ประหยัดแรง

ถ้าพูดถึงการจัดการฟอร์มใน React หรือ Next.js หลายคนคงเคยเจอปัญหาปวดหัวกับการจัดการ state, validation, และการ submit ข้อมูลกันใช่ไหม? วันนี้เราจะมาทำความรู้จักกับ React Hook Form ซึ่งเป็นหนึ่งในไลบรารีจัดการฟอร์มที่ดีที่สุดสำหรับ React และ Next.js ทำให้ชีวิตนักพัฒนาง่ายขึ้นเยอะ!

ทำไมต้องใช้ React Hook Form?

โดยปกติ ถ้าเราจัดการฟอร์มใน React ด้วย useState() เราจะต้องสร้าง state แยกกันตามฟิลด์ของฟอร์ม เช่น

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

แล้วทุกครั้งที่มีการเปลี่ยนค่าฟิลด์ เราต้องใช้ onChange มาจับข้อมูลอีก

<input type="text" value={name} onChange={(e) => setName(e.target.value)} />

มันใช้ได้ก็จริง แต่มันเยอะและยุ่งยาก!

React Hook Form (RHF) ช่วยลดความยุ่งยากนี้ ด้วยการทำให้ฟอร์มเป็นแบบ uncontrolled ซึ่งหมายความว่า ไม่ต้องใช้ useState() คุมค่าฟิลด์แบบ manual แต่ให้ React ทำงานร่วมกับ DOM โดยตรง

ติดตั้ง React Hook Form

ก่อนอื่น ต้องติดตั้ง React Hook Form ก่อน

npm install react-hook-form

หรือถ้าใช้ Yarn

yarn add react-hook-form

ใช้ React Hook Form ใน Next.js

มาดูโค้ดตัวอย่างง่ายๆ ของการใช้งาน React Hook Form ใน Next.js

สร้างฟอร์มแบบง่าย

import { useForm } from 'react-hook-form';

export default function MyForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} placeholder="ชื่อ" />
      <input {...register('email')} type="email" placeholder="อีเมล" />
      <button type="submit">ส่ง</button>
    </form>
  );
}

อธิบายโค้ด:

• useForm() คือฟังก์ชันหลักที่ใช้ดึง API ต่างๆ
• register() ใช้สำหรับเชื่อมโยงอินพุตฟอร์มกับ React Hook Form
• handleSubmit(onSubmit) ใช้จัดการการส่งฟอร์ม
• data ที่ได้จาก onSubmit() จะเป็นอ็อบเจ็กต์ที่รวมค่าทั้งหมดในฟอร์ม

การเพิ่ม Validation

ถ้าไม่อยากให้ผู้ใช้กรอกมั่วๆ ก็ต้องเพิ่ม Validation Rules เข้าไป โดยใช้ register()

import { useForm } from 'react-hook-form';

export default function MyForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: 'ต้องกรอกชื่อ' })} placeholder="ชื่อ" />
      {errors.name && <p>{errors.name.message}</p>}

      <input {...register('email', { required: 'ต้องกรอกอีเมล', pattern: { value: /\S+@\S+\.\S+/, message: 'รูปแบบอีเมลไม่ถูกต้อง' } })} placeholder="อีเมล" />
      {errors.email && <p>{errors.email.message}</p>}

      <button type="submit">ส่ง</button>
    </form>
  );
}

สิ่งที่เพิ่มเข้ามา:

• ใช้ errors เพื่อตรวจจับข้อผิดพลาดในแต่ละฟิลด์
• ถ้ามี error จะแสดงข้อความแจ้งเตือนใต้ input

การใช้ Default Values

บางครั้งเราอาจต้องกำหนดค่าตั้งต้นให้ฟอร์ม เช่น กรณีแก้ไขข้อมูลผู้ใช้

const { register, handleSubmit } = useForm({
  defaultValues: {
    name: 'John Doe',
    email: 'john@example.com',
  },
});

ใช้ Controller กับ React Hook Form

ถ้าเราต้องใช้ React Component ของบุคคลที่สาม (เช่น React Select หรือ DatePicker) ที่ไม่รองรับ register() โดยตรง เราต้องใช้ Controller

import { useForm, Controller } from 'react-hook-form';
import Select from 'react-select';

export default function MyForm() {
  const { control, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="gender"
        control={control}
        render={({ field }) => <Select {...field} options={[{ label: 'ชาย', value: 'male' }, { label: 'หญิง', value: 'female' }]} />}
      />
      <button type="submit">ส่ง</button>
    </form>
  );
}

ใช้งานร่วมกับ Next.js API Routes

ถ้าเราต้องการส่งข้อมูลไปที่ API ใน Next.js สามารถทำแบบนี้

const onSubmit = async (data) => {
  const response = await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  const result = await response.json();
  console.log(result);
};

ฝั่ง API Route (/pages/api/submit.js)

export default function handler(req, res) {
  if (req.method === 'POST') {
    res.status(200).json({ message: 'ฟอร์มถูกส่งแล้ว!', data: req.body });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

สรุป

React Hook Form เป็นตัวช่วยที่ทำให้การจัดการฟอร์มใน Next.js ง่ายขึ้น ลดโค้ดที่ต้องเขียน และรองรับ validation แบบ built-in

• ใช้งานง่าย – ใช้ register() เชื่อมโยงฟิลด์ได้เลย
• ไม่ต้องใช้ useState() แยกฟิลด์ – ประหยัดโค้ด
• รองรับ validation ในตัว – กำหนดเงื่อนไขได้ง่าย
• ทำงานเร็วกว่าโซลูชันอื่นๆ เช่น Formik

ถ้าคุณต้องการจัดการฟอร์มใน Next.js React Hook Form คือคำตอบ!

การใช้ Zustand หรือ Redux ใน Next.js: อะไรดีกว่ากัน?

ถ้าพูดถึงการจัดการ state ใน Next.js เชื่อว่าหลายคนต้องเคยลังเลระหว่าง Zustand กับ Redux แน่นอน เพราะทั้งสองตัวนี้ได้รับความนิยมมากและมีแนวทางการทำงานที่แตกต่างกัน วันนี้เราจะมาคุยกันแบบบ้านๆ ไม่เน้นทฤษฎีเยอะ แต่เน้นให้เข้าใจง่าย ว่าควรเลือกใช้ตัวไหนดีสำหรับโปรเจกต์ของคุณ

ทำไมต้องจัดการ State ใน Next.js?

Next.js เป็น React Framework ที่ช่วยให้เราสร้างเว็บแอปพลิเคชันได้เร็วและดีขึ้น แต่ถึงจะเทพแค่ไหน Next.js ก็ยังมีปัญหาเรื่องการจัดการ state ที่เราต้องคิดหนัก โดยเฉพาะเมื่อเว็บของเรามีหลายหน้า (multi-page) หรือมีข้อมูลที่แชร์กันระหว่างคอมโพเนนต์หลายตัว

ในกรณีที่ state ของเราซับซ้อนขึ้น การใช้ useState() หรือ useContext() อาจจะไม่พอแล้ว เช่น

• มีหลายคอมโพเนนต์ต้องใช้ข้อมูลร่วมกัน
• ต้องเก็บสถานะของผู้ใช้ที่ล็อกอิน
• ต้องดึงข้อมูลจาก API แล้วแชร์ให้ทุกหน้าใช้

ถึงจุดนี้แหละ ที่พวก State Management Library อย่าง Zustand และ Redux โผล่มาช่วยชีวิตเรา

Redux: เจ้าพ่อ State Management

จุดเด่นของ Redux

Redux เป็น state container ระดับตำนานที่อยู่กับ React มานาน มันใช้ single source of truth (เก็บ state ไว้ที่เดียว) และเปลี่ยนค่า state ด้วย action และ reducer

สิ่งที่ทำให้ Redux เจ๋งคือ

• Predictable State – ทุกการเปลี่ยนแปลงของ state ถูกควบคุมโดย action และ reducer ทำให้ debug ง่าย
• DevTools สุดเทพ – มี Redux DevTools ให้ตรวจสอบทุกการเปลี่ยนแปลงของ state ได้แบบ real-time
• Ecosystem ใหญ่โต – มี middleware อย่าง Redux Thunk หรือ Redux Saga ช่วยให้จัดการ asynchronous action ได้ง่ายขึ้น

จุดด้อยของ Redux

• โค้ดยาว – Redux ต้องสร้าง action, reducer และ dispatch ซึ่งทำให้โค้ดยืดยาว ถ้าทำผิดที่เดียวอาจล้มทั้งระบบ
• ต้องใช้ boilerplate เยอะ – แค่จะอัพเดท state ต้องผ่านหลายขั้นตอน เช่น สร้าง action → dispatch action → reducer → update store
• Learning Curve สูง – สำหรับมือใหม่ Redux อาจทำให้ปวดหัว เพราะต้องเข้าใจโครงสร้างหลายอย่าง

Zustand: เบา สั้น และเร็ว

จุดเด่นของ Zustand

Zustand เป็น state management ที่เบาและง่ายกว่า Redux มันใช้แนวคิดของ flux pattern แต่ไม่ต้องมี action หรือ reducer ให้วุ่นวาย

สิ่งที่ทำให้ Zustand น่าสนใจคือ

• API ใช้ง่าย – ไม่ต้องมี action หรือ reducer แค่สร้าง store แล้วใช้ได้เลย
• ไม่มี boilerplate – Zustand ใช้ฟังก์ชันเดียวสร้าง state ได้ทันที
• ใช้งานร่วมกับ Server Components ได้ดี – ทำให้เหมาะกับ Next.js ที่ใช้ App Router

จุดด้อยของ Zustand

• ไม่มี DevTools ที่เทพเท่า Redux – ถ้าต้องการ debug อาจต้องใช้ console.log แทน
• เหมาะกับโปรเจกต์ขนาดกลาง-เล็ก – ถ้าเป็นแอปขนาดใหญ่ Redux อาจจะควบคุม state ได้ดีกว่า

เปรียบเทียบ Redux vs Zustand

Feature	Redux	Zustand
โครงสร้างโค้ด	ซับซ้อน ต้องมี action, reducer, store	เรียบง่าย ใช้ฟังก์ชันเดียวสร้าง store
Performance	อาจมี overhead สูงถ้าใช้ไม่ดี	เบาและเร็วกว่า Redux
DevTools	Redux DevTools ช่วย debug ได้ดี	มี DevTools แต่ไม่เทพเท่า Redux
การใช้งานกับ Next.js	ต้อง config เพิ่ม	ใช้งานง่าย ไม่มี config ยุ่งยาก
เหมาะกับโปรเจกต์	ใหญ่และซับซ้อน	เล็ก-กลาง

ควรใช้ Zustand หรือ Redux ใน Next.js?

ใช้ Redux ถ้า

✅ โปรเจกต์ของคุณ ซับซ้อน และต้องจัดการ state เยอะ
✅ ต้องการ DevTools เพื่อ debug state ได้ง่าย
✅ แอปของคุณต้องการ middleware เช่น Redux Thunk หรือ Redux Saga

ใช้ Zustand ถ้า

✅ คุณต้องการโค้ดที่ เรียบง่าย และ ไม่ต้องการ boilerplate
✅ โปรเจกต์ของคุณเป็น ขนาดเล็ก-กลาง และไม่ต้องการ state management ที่หนัก
✅ คุณใช้ Next.js App Router และต้องการ state management ที่เข้ากันได้ดี

ตัวอย่างการใช้ Redux กับ Next.js

ก่อนจะใช้ Redux กับ Next.js ต้องติดตั้งแพ็กเกจก่อน

npm install @reduxjs/toolkit react-redux

จากนั้นสร้าง store.js

import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
  },
});

export const { increment, decrement } = counterSlice.actions;

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

แล้วใช้ Provider ใน _app.js หรือ layout.js

import { Provider } from 'react-redux';
import { store } from '../store';

export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

ดึงค่า state ไปใช้ในคอมโพเนนต์

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../store';

export default function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

ตัวอย่างการใช้ Zustand กับ Next.js

ติดตั้ง Zustand ก่อน

npm install zustand

สร้าง store.js

import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCounterStore;

ใช้ในคอมโพเนนต์

import useCounterStore from '../store';

export default function Counter() {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

สรุป

• Redux เหมาะกับโปรเจกต์ขนาดใหญ่ที่ต้องการความเป็นระบบ
• Zustand เหมาะกับโปรเจกต์ที่ต้องการความง่ายและเร็ว
• ถ้าคุณไม่แน่ใจ ให้ลองใช้ Zustand ก่อน ถ้ารู้สึกว่าไม่พอ ค่อยย้ายไป Redux

สุดท้ายแล้ว การเลือกเครื่องมือขึ้นอยู่กับ ความเหมาะสมของโปรเจกต์ ไม่มีกฎตายตัวว่าต้องใช้ตัวไหนเสมอไป

วิธีใช้ OAuth (Google, Facebook, GitHub) กับ NextAuth.js

ถ้าพูดถึงการทำระบบล็อกอินแบบ Single Sign-On (SSO) ในแอปพลิเคชันเว็บที่ใช้ Next.js ก็คงหนีไม่พ้น NextAuth.js ที่เป็นไลบรารีสุดเทพ ช่วยให้เราสามารถจัดการเรื่องการยืนยันตัวตน (Authentication) ได้ง่ายมาก ๆ แถมยังรองรับ OAuth จากหลายแพลตฟอร์ม เช่น Google, Facebook, GitHub แบบไม่ต้องปวดหัวกับการเขียนโค้ดเยอะ

บทความนี้จะพาไปดูวิธีใช้งาน OAuth กับ NextAuth.js ตั้งแต่ต้นจนจบ รับรองว่าทำตามได้ง่าย ไม่งงแน่นอน! 🚀

🧐 NextAuth.js คืออะไร?

NextAuth.js เป็นไลบรารีที่ช่วยจัดการ Authentication บน Next.js โดยรองรับทั้ง

✅ Email-based login
✅ Credentials-based login
✅ OAuth (เช่น Google, Facebook, GitHub)
✅ JWT และ Database sessions

ความเจ๋งคือ ไม่ต้องเซ็ต Backend เอง เพราะมันจัดการให้หมดแล้ว แค่ติดตั้งและคอนฟิกให้ถูกต้องก็ใช้งานได้เลย!

🛠️ ติดตั้ง NextAuth.js

ก่อนอื่น เราต้องมีโปรเจกต์ Next.js ก่อน ถ้ายังไม่มี ก็สร้างใหม่ได้เลย:

npx create-next-app@latest my-auth-app
cd my-auth-app
npm install next-auth

จากนั้นก็เปิดไฟล์ .env.local แล้วตั้งค่าตัวแปรแวดล้อมที่เกี่ยวข้องกับ OAuth ที่เราจะใช้ (เช่น Google, Facebook, GitHub)

🔑 การตั้งค่า OAuth Provider

1️⃣ ตั้งค่า Google OAuth

ไปที่ Google Cloud Console (https://console.cloud.google.com/) แล้วทำตามนี้:

1. สร้างโปรเจกต์ใหม่
2. ไปที่ APIs & Services > Credentials
3. กด Create Credentials > OAuth Client ID
4. ตั้งค่า Authorized redirect URIs เป็น: http://localhost:3000/api/auth/callback/google
5. ก๊อบปี้ Client ID และ Client Secret มาใส่ใน .env.local

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

2️⃣ ตั้งค่า Facebook OAuth

ไปที่ Meta for Developers (https://developers.facebook.com/) แล้วทำตามนี้:

1. สร้างแอปใหม่
2. ไปที่ Settings > Basic แล้วจด App ID และ App Secret
3. ไปที่ Facebook Login > Settings แล้วตั้งค่า Valid OAuth Redirect URIs เป็น: http://localhost:3000/api/auth/callback/facebook
4. เพิ่มค่าเหล่านี้ใน .env.local

FACEBOOK_CLIENT_ID=your-facebook-app-id
FACEBOOK_CLIENT_SECRET=your-facebook-app-secret

3️⃣ ตั้งค่า GitHub OAuth

ไปที่ GitHub Developer Settings (https://github.com/settings/developers) แล้วทำตามนี้:

1. กด New OAuth App
2. ตั้งค่า Authorization callback URL เป็น: http://localhost:3000/api/auth/callback/github
3. ก๊อบปี้ Client ID และ Client Secret มาใส่ใน .env.local

GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret

🔌 คอนฟิก NextAuth.js

สร้างไฟล์ pages/api/auth/[...nextauth].js แล้วใส่โค้ดนี้:

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";
import GitHubProvider from "next-auth/providers/github";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub;
      return session;
    },
  },
});

📌 อธิบายโค้ด:

• เรา import NextAuth และเพิ่ม Google, Facebook, GitHub เป็น OAuth Providers
• ใช้ Environment Variables (process.env...) เพื่อความปลอดภัย
• เพิ่ม Callback function เพื่อให้ Session มีค่า user.id

🎨 สร้าง UI สำหรับล็อกอิน

ไปที่ pages/index.js แล้วเพิ่มปุ่มล็อกอิน / ออกจากระบบ

import { signIn, signOut, useSession } from "next-auth/react";

export default function Home() {
  const { data: session } = useSession();

  return (
    <div>
      <h1>NextAuth.js OAuth Demo</h1>
      {session ? (
        <div>
          <p>Welcome, {session.user.name}</p>
          <button onClick={() => signOut()}>Sign Out</button>
        </div>
      ) : (
        <button onClick={() => signIn()}>Sign In</button>
      )}
    </div>
  );
}

📌 อธิบายโค้ด:

• ใช้ useSession() เช็กสถานะล็อกอิน
• ถ้าล็อกอินแล้ว แสดงชื่อและปุ่ม Sign Out
• ถ้ายังไม่ล็อกอิน แสดงปุ่ม Sign In

🚀 ทดสอบการล็อกอิน

    รันเซิร์ฟเวอร์:

    npm run dev

    เปิด http://localhost:3000 แล้วลองกด Sign In
    เลือกล็อกอินผ่าน Google, Facebook หรือ GitHub

🎯 สรุป

NextAuth.js ทำให้การเพิ่ม OAuth Login เป็นเรื่องง่ายมาก 🔥
แค่ติดตั้ง, คอนฟิก Providers, สร้าง UI แล้วก็ใช้งานได้เลย!

✅ รองรับหลายแพลตฟอร์ม
✅ ไม่ต้องเขียน Backend เอง
✅ ใช้กับ Next.js ได้แบบ Native

ใครกำลังหาโซลูชัน Authentication สำหรับ Next.js นี่คือทางเลือกที่ดีที่สุด! 🚀

ความแตกต่างระหว่าง SSR, SSG และ CSR ใน Next.js – อธิบายแบบง่ายๆ

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

🎭 อะไรคือ SSR, SSG และ CSR?

ถ้าจะเข้าใจง่าย ๆ ให้นึกถึงวิธีที่หน้าเว็บถูกโหลดขึ้นมาบนหน้าจอของผู้ใช้ มันมี 3 วิธีหลัก ๆ คือ

• CSR (Client-Side Rendering) → โหลดหน้าเว็บแบบเปล่า ๆ แล้วให้ JavaScript ไปดึงข้อมูลมาเติมเอง
• SSR (Server-Side Rendering) → โหลดข้อมูลที่ฝั่งเซิร์ฟเวอร์ แล้วส่ง HTML ที่มีข้อมูลมาครบให้ผู้ใช้
• SSG (Static Site Generation) → สร้าง HTML ทั้งหมดตั้งแต่ตอน build และเสิร์ฟแบบ static

มาเจาะลึกแต่ละตัวกัน 🔍

1. CSR (Client-Side Rendering) – โหลดข้อมูลที่ฝั่งผู้ใช้

📌 มันคืออะไร?

CSR (Client-Side Rendering) เป็นแนวทางการโหลดหน้าเว็บแบบดั้งเดิมของ React คือ

• โหลดโครงสร้างหน้าเว็บมาก่อน
• จากนั้นใช้ JavaScript ไปดึงข้อมูลจาก API หรือ Database มาเติมที่ฝั่งผู้ใช้

🏗 ตัวอย่างโค้ด CSR ใน Next.js

import { useEffect, useState } from "react";

export default function CSRPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  if (!data) return <p>Loading...</p>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

✅ ข้อดีของ CSR
✔️ โหลดเร็วถ้าเนื้อหาไม่เยอะ
✔️ ประสบการณ์ใช้งานลื่นไหล (เพราะไม่ต้องรีเฟรชหน้า)
✔️ ใช้งานง่ายมาก


❌ ข้อเสียของ CSR
❌ SEO ไม่ดี เพราะต้องรอให้ข้อมูลโหลดมาก่อน
❌ โหลดข้อมูลช้ากว่า เพราะต้องดึง API เพิ่ม

2. SSR (Server-Side Rendering) – เรนเดอร์บนเซิร์ฟเวอร์

📌 มันคืออะไร?

SSR (Server-Side Rendering) ทำงานตรงข้ามกับ CSR คือ

• เมื่อมีคนเข้าเว็บ Next.js จะไปดึงข้อมูลจากเซิร์ฟเวอร์มาก่อน
• แล้วสร้าง HTML พร้อมข้อมูล ส่งให้ผู้ใช้เลย
• ทำให้หน้าเว็บแสดงผลพร้อมข้อมูลตั้งแต่แรก

🏗 ตัวอย่างโค้ด SSR ใน Next.js

export async function getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();

  return {
    props: { data },
  };
}

export default function SSRPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

✅ ข้อดีของ SSR
✔️ SEO ดีมาก เพราะข้อมูลมาเป็น HTML พร้อมเลย
✔️ ใช้ได้กับเนื้อหาที่เปลี่ยนบ่อย เช่น ข่าว หรือ Dashboard
✔️ ไม่ต้องรอโหลดข้อมูลที่ฝั่งผู้ใช้


❌ ข้อเสียของ SSR
❌ โหลดช้ากว่า SSG เพราะต้องรอให้เซิร์ฟเวอร์ดึงข้อมูลก่อน
❌ ถ้ามีคนเข้าเยอะ อาจทำให้เซิร์ฟเวอร์ช้า

3. SSG (Static Site Generation) – เรนเดอร์ตั้งแต่ตอน build

📌 มันคืออะไร?

SSG (Static Site Generation) เป็นการสร้าง HTML ล่วงหน้าตั้งแต่ตอน build เวลา deploy หน้าเว็บก็จะเป็น ไฟล์ HTML Static ที่พร้อมใช้งาน

🏗 ตัวอย่างโค้ด SSG ใน Next.js

export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();

  return {
    props: { data },
  };
}

export default function SSGPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}


✅ ข้อดีของ SSG
✔️ เร็วมาก เพราะหน้าเว็บถูกสร้างล่วงหน้า
✔️ รองรับ SEO ดีเยี่ยม
✔️ เซิร์ฟเวอร์ไม่ต้องทำงานหนัก


❌ ข้อเสียของ SSG
❌ ใช้กับข้อมูลที่เปลี่ยนแปลงตลอดไม่ได้ เช่น Dashboard หรือ News Feed
❌ ถ้าเปลี่ยนข้อมูล ต้อง build ใหม่

🎯 สรุปว่าเลือกอะไรดี?

วิธี	โหลดเร็วไหม? 🚀	SEO ดีไหม? 🌍	เหมาะกับอะไร?
CSR (Client-Side Rendering)	ปานกลาง	แย่	เว็บที่ไม่เน้น SEO เช่น Dashboard
SSR (Server-Side Rendering)	ช้าแต่ได้ข้อมูลครบ	ดี	เว็บที่มีข้อมูลเปลี่ยนบ่อย เช่น ข่าว
SSG (Static Site Generation)	เร็วที่สุด	ดีมาก	เว็บที่ข้อมูลเปลี่ยนน้อย เช่น บล็อก

✅ แนวทางแนะนำ

• ใช้ CSR ถ้าเน้น UX และไม่แคร์ SEO
• ใช้ SSR ถ้าต้องอัปเดตข้อมูลบ่อย และต้องการ SEO
• ใช้ SSG ถ้าต้องการความเร็วและ SEO ดี

🚀 Hybrid Approach – ใช้หลายแบบร่วมกัน

Next.js ไม่ได้บังคับให้ใช้แค่วิธีเดียว! เราสามารถใช้ SSR, SSG และ CSR ร่วมกันได้ เช่น

• ใช้ SSG สำหรับหน้าเว็บหลัก เช่น หน้า About, หน้า Blog
• ใช้ SSR สำหรับหน้าที่เปลี่ยนข้อมูลบ่อย เช่น หน้า Dashboard
• ใช้ CSR สำหรับฟีเจอร์ที่ไม่เกี่ยวกับ SEO เช่น หน้า Chat หรือ Cart

ตัวอย่างโค้ด Hybrid Approach

export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 10, // อัปเดตข้อมูลทุก 10 วินาที
  };
}

🔥 สรุป

• CSR → โหลดที่ฝั่งผู้ใช้ (เร็ว แต่ไม่ดีต่อ SEO)
• SSR → โหลดที่ฝั่งเซิร์ฟเวอร์ (SEO ดี แต่โหลดช้ากว่า)
• SSG → โหลดล่วงหน้าตอน build (เร็วและ SEO ดีมาก)

    Next.js ใช้หลายแบบร่วมกันได้ 🚀

การใช้ 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 นี่เป็นเวลาที่เหมาะสุด ๆ แล้ว! 🚀

การใช้ 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)

Next.js คืออะไร และทำไมต้องใช้ Next.js

    ถ้าพูดถึงการพัฒนาเว็บแอปพลิเคชันด้วย React.js หลายคนน่าจะเคยได้ยินชื่อ Next.js มาบ้าง แต่บางคนอาจจะยังไม่แน่ใจว่ามันคืออะไร ดียังไง และทำไมเราถึงควรใช้มัน แทนที่จะใช้ React ธรรมดา วันนี้เราจะมาทำความรู้จักกับ Next.js กันแบบเข้าใจง่าย ๆ กันเลย!

Next.js คืออะไร?

    Next.js เป็นเฟรมเวิร์กที่ถูกสร้างขึ้นมาบน React ซึ่งช่วยให้การพัฒนาเว็บแอปเป็นเรื่องง่ายขึ้น โดยเฉพาะในเรื่องของการทำงานฝั่งเซิร์ฟเวอร์ (Server-side Rendering) และการทำ SEO ซึ่งเป็นจุดที่ React ปกติทำได้ยาก

    ถ้าเปรียบเทียบง่าย ๆ React ก็เหมือนกับชิ้นส่วนต่าง ๆ ของรถยนต์ ส่วน Next.js คือรถยนต์ที่ประกอบเสร็จแล้ว มีเครื่องยนต์พร้อมขับ แค่เติมน้ำมัน (โค้ด) ก็ใช้งานได้เลย! ไม่ต้องมาประกอบเองให้วุ่นวาย

ทำไมต้องใช้ Next.js?

    1. โหลดเร็วกว่า ด้วย Server-side Rendering (SSR) และ Static Site Generation (SSG) ปกติแล้ว React ใช้วิธี Client-side Rendering (CSR) คือโหลดหน้าเว็บมาก่อน แล้วไปดึงข้อมูลจาก API มาเติมทีหลัง ทำให้บางครั้งหน้าเว็บโหลดมาแล้ว แต่ยังไม่มีข้อมูล ต้องรออีกแป๊บนึงถึงจะแสดงผลครบ ซึ่งไม่ดีต่อ SEO และ UX เลย

แต่ Next.js แก้ปัญหานี้ด้วย SSR และ SSG

• SSR (Server-side Rendering): ดึงข้อมูลจากเซิร์ฟเวอร์ก่อน แล้วส่งหน้าเว็บที่มีข้อมูลพร้อมให้ผู้ใช้ทันที โหลดเร็วขึ้นเยอะ!
• SSG (Static Site Generation): สร้างหน้าเว็บเป็นไฟล์ HTML ตั้งแต่ตอน Build แล้วโหลดแบบ Static ทำให้เว็บเร็วสุด ๆ แถมยังลดภาระเซิร์ฟเวอร์อีกด้วย

    2. SEO ดีขึ้น เพราะ Google อ่านเนื้อหาได้เลย หนึ่งในปัญหาใหญ่ของ React คือ Google Bot ไม่สามารถอ่านเนื้อหาบนเว็บที่ใช้ CSR ได้ดีนัก เพราะทุกอย่างโหลดผ่าน JavaScript แต่ถ้าใช้ Next.js ที่รองรับ SSR และ SSG ก็จะช่วยให้ Google มองเห็นเนื้อหาได้ง่ายขึ้น ส่งผลให้ SEO ของเราดีขึ้นแบบเห็นได้ชัด

    3. มีระบบ Routing อัตโนมัติ (File-based Routing) ปกติถ้าใช้ React อย่างเดียว เราต้องใช้ React Router มาจัดการเส้นทาง (Routes) เอง แต่ใน Next.js แค่สร้างไฟล์ในโฟลเดอร์ pages/ เช่น:

• pages/index.js → /
• pages/about.js → /about
• pages/products/index.js → /products

แค่สร้างไฟล์ก็ได้ Routing อัตโนมัติ ไม่ต้อง config เองให้ยุ่งยาก

    4. API Routes - ทำ Backend ได้ในตัว Next.js ไม่ได้มีดีแค่ Frontend แต่ยังให้เราสร้าง API ได้เลยในโฟลเดอร์ pages/api/ เช่น:

• pages/api/hello.js → GET /api/hello

    ซึ่งเราสามารถใช้ API นี้เชื่อมต่อกับฐานข้อมูล หรือใช้ร่วมกับ Frontend ได้ทันที ไม่ต้องไปเปิดเซิร์ฟเวอร์แยก

    5. รองรับ Image Optimization อัตโนมัติ Next.js มีฟีเจอร์ next/image ที่ช่วยให้เราจัดการภาพได้ง่ายขึ้น ไม่ต้องมานั่ง Optimize เอง เช่น การปรับขนาดอัตโนมัติ การแปลงเป็น WebP และการโหลดแบบ Lazy Loading เพื่อช่วยให้เว็บโหลดเร็วขึ้น

    6. รองรับการ Deploy ง่าย ๆ บน Vercel Next.js ถูกสร้างโดยทีมงานของ Vercel ซึ่งเป็นแพลตฟอร์มสำหรับ Deploy เว็บแบบ Serverless เราสามารถเชื่อม GitHub หรือ GitLab แล้วกด Deploy ได้ในไม่กี่คลิก แถมมีฟีเจอร์ CI/CD ให้ใช้งานด้วย

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

Next.js เหมาะกับใคร?

    Next.js เหมาะกับนักพัฒนาเว็บที่ต้องการ พัฒนาเว็บให้เร็วขึ้น ทำ SEO ให้ดีขึ้น และลดความซับซ้อนของโปรเจกต์ ไม่ว่าจะเป็น

• เว็บทั่วไปที่ต้องการ SEO เช่น บล็อก หรือเว็บข่าว
• เว็บอีคอมเมิร์ซ ที่ต้องโหลดข้อมูลเร็วและรองรับ SEO
• Dashboard หรือแอปพลิเคชันที่ใช้ข้อมูลเยอะ ๆ
• SaaS หรือเว็บ Subscription ที่ต้องการประสิทธิภาพสูง
• เว็บที่ต้องการ Full-stack API ในตัว ไม่ต้องเปิดเซิร์ฟเวอร์แยก

ข้อเสียของ Next.js ที่ควรรู้

    แน่นอนว่าไม่มีอะไรสมบูรณ์แบบ Next.js ก็มีข้อจำกัดบางอย่าง เช่น

• เรียนรู้เพิ่มขึ้นจาก React ปกติ เพราะมี SSR, SSG, ISR ที่ต้องเข้าใจเพิ่ม
• SSR อาจจะช้ากว่า CSR ถ้าต้องดึงข้อมูลเยอะมาก เพราะเซิร์ฟเวอร์ต้อง Generate หน้าใหม่ทุกครั้ง
• Hosting อาจต้องใช้แพลตฟอร์มเฉพาะ เช่น Vercel หรือโฮสต์ที่รองรับ SSR ไม่ใช่ทุกที่รองรับได้ง่ายเหมือน React ปกติ

สรุป: Next.js ดีไหม? ควรใช้หรือเปล่า?

    ถ้าคุณใช้ React และต้องการเพิ่มประสิทธิภาพให้เว็บ โหลดเร็วขึ้น ทำ SEO ได้ดีขึ้น และมีฟีเจอร์ Backend ในตัว Next.js คือคำตอบ! โดยเฉพาะถ้าคุณพัฒนาเว็บที่เน้นความเร็วและต้องการให้ Google มองเห็นเนื้อหาแบบเต็ม ๆ

    แต่ถ้าโปรเจกต์ของคุณเป็น Single Page Application (SPA) ธรรมดาที่ไม่สน SEO หรือโหลดข้อมูลฝั่งไคลเอนต์เป็นหลัก การใช้ React ปกติอาจจะเหมาะกว่า

แต่ถ้าอยากลอง Next.js ก็ไม่ยาก! สามารถติดตั้งและเริ่มต้นใช้งานได้ง่าย ๆ แค่รันคำสั่งนี้:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

แล้วเข้าไปที่ http://localhost:3000 แค่นี้ก็พร้อมใช้งาน Next.js แล้ว!

    นี่คือภาพรวมของ Next.js และเหตุผลว่าทำไมมันถึงเป็นเฟรมเวิร์กที่นักพัฒนาหลายคนชื่นชอบ ถ้าคุณกำลังมองหาเครื่องมือที่จะช่วยให้เว็บของคุณเร็วขึ้นและรองรับ SEO ได้ดีขึ้น Next.js คือตัวเลือกที่ไม่ควรพลาด!