วิธีเพิ่ม Meta Tags และทำ SEO ใน Next.js ให้เว็บติดอันดับ Google

ถ้าคุณทำเว็บด้วย Next.js แล้วอยากให้เว็บของคุณ ติดอันดับ Google หรือมี SEO (Search Engine Optimization) ที่ดีขึ้น Meta Tags เป็นสิ่งที่ต้องรู้!

Meta Tags คืออะไร? 🤔

Meta Tags คือ โค้ดที่ซ่อนอยู่ใน <head> ของเว็บเพจ ซึ่งช่วยให้ Google, Facebook, Twitter และแพลตฟอร์มอื่นๆ เข้าใจว่าเว็บของเราคืออะไร

ทำไม Meta Tags สำคัญ?

✅ ช่วยให้ Google จัดอันดับเว็บของคุณดีขึ้น (SEO)
✅ ช่วยให้ Social Media แสดงพรีวิวสวยๆ เวลาแชร์ลิงก์
✅ ช่วยให้เว็บโหลดเร็วขึ้น (Performance Boost)

วันนี้เราจะมาเรียนรู้ว่า Next.js ช่วยให้การเพิ่ม Meta Tags และการทำ SEO ง่ายขึ้นได้ยังไง 💡

🚀 เริ่มต้น: ใช้ <Head> ใน Next.js

ใน Next.js เราใช้คอมโพเนนต์ <Head> จาก next/head เพื่อใส่ Meta Tags ได้ง่ายๆ

🔹 ตัวอย่างใน pages/index.js

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>สุดยอดเว็บ Next.js | ติดอันดับ Google ง่ายๆ 🚀</title>
        <meta name="description" content="เว็บ Next.js ที่สุดยอดสำหรับการทำ SEO และ Meta Tags" />
        <meta name="keywords" content="Next.js, SEO, Meta Tags, Google Ranking" />
        <meta name="author" content="Your Name" />
      </Head>
      <main>
        <h1>🔥 ยินดีต้อนรับสู่สุดยอดเว็บ Next.js!</h1>
      </main>
    </>
  );
}

🔹 อธิบายโค้ด

✅ <title> – เป็นชื่อของหน้าเว็บที่จะแสดงบนแท็บเบราว์เซอร์
✅ <meta name="description"> – บอก Google ว่าเว็บนี้เกี่ยวกับอะไร
✅ <meta name="keywords"> – เพิ่มคีย์เวิร์ดที่ช่วยให้ Google เข้าใจเว็บเรา (แต่ Google ให้ความสำคัญกับ description มากกว่า)
✅ <meta name="author"> – บอกว่าใครเป็นเจ้าของเว็บ

🎯 ปรับแต่ง Meta Tags ให้ Social Media

ถ้าเราแชร์ลิงก์บน Facebook, Twitter หรือ LINE แล้วอยากให้มี รูปภาพ, ชื่อเว็บ และคำอธิบายสวยๆ เราต้องเพิ่ม Open Graph (OG) Tags

🔹 ตัวอย่าง Open Graph Tags

<Head>
  <meta property="og:title" content="สุดยอดเว็บ Next.js | ติดอันดับ Google ง่ายๆ 🚀" />
  <meta property="og:description" content="เว็บ Next.js ที่สุดยอดสำหรับการทำ SEO และ Meta Tags" />
  <meta property="og:image" content="https://yourwebsite.com/og-image.jpg" />
  <meta property="og:url" content="https://yourwebsite.com/" />
  <meta property="og:type" content="website" />
</Head>

🔹 อธิบายโค้ด

✅ og:title – ชื่อของเว็บเมื่อแชร์บน Facebook
✅ og:description – คำอธิบายเว็บ
✅ og:image – รูปภาพพรีวิว (แนะนำขนาด 1200x630px)
✅ og:url – URL ของเว็บ
✅ og:type – ประเภทของเนื้อหา เช่น website, article

🐦 เพิ่ม Twitter Meta Tags

ถ้าอยากให้เว็บดูดีตอนแชร์บน Twitter ให้ใช้ Twitter Card Tags

<Head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="สุดยอดเว็บ Next.js | ติดอันดับ Google ง่ายๆ 🚀" />
  <meta name="twitter:description" content="เว็บ Next.js ที่สุดยอดสำหรับการทำ SEO และ Meta Tags" />
  <meta name="twitter:image" content="https://yourwebsite.com/twitter-image.jpg" />
</Head>

🔹 อธิบายโค้ด

✅ twitter:card – summary_large_image ทำให้แสดงภาพใหญ่
✅ twitter:title – ชื่อของเว็บ
✅ twitter:description – คำอธิบาย
✅ twitter:image – รูปภาพที่ใช้แสดงบน Twitter

🏆 การทำ SEO ให้ Next.js ติดอันดับ Google

นอกจาก Meta Tags แล้ว Next.js ยังช่วยเรื่อง SEO ได้อีกหลายอย่าง เช่น SSR, SSG และ Dynamic Meta Tags

1️⃣ ใช้ Server-side Rendering (SSR) เพื่อโหลด Meta Tags แบบไดนามิก

บางหน้าเว็บ (เช่น บทความ หรือหน้าสินค้า) อาจต้องใช้ Meta Tags ที่เปลี่ยนแปลงตามข้อมูล Next.js รองรับ SSR เพื่อโหลด Meta Tags ตามเนื้อหาแต่ละหน้า

import Head from 'next/head';

export async function getServerSideProps() {
  const post = { title: "บทความสุดเจ๋ง!", description: "เนื้อหาดีมากเกี่ยวกับ SEO" };

  return { props: { post } };
}

export default function BlogPost({ post }) {
  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.description} />
      </Head>
      <main>
        <h1>{post.title}</h1>
        <p>{post.description}</p>
      </main>
    </>
  );
}

2️⃣ ใช้ Static Site Generation (SSG) ให้เว็บโหลดเร็ว

ถ้าเนื้อหาของเว็บเปลี่ยนไม่บ่อย เช่น หน้าเกี่ยวกับเรา หรือ หน้าผลิตภัณฑ์ เราสามารถใช้ SSG เพื่อให้เว็บโหลดเร็วขึ้น

export async function getStaticProps() {
  return {
    props: { title: "เกี่ยวกับเรา", description: "นี่คือหน้าเกี่ยวกับเรา" },
  };
}

🔍 เช็คว่า Meta Tags ทำงานหรือไม่?

หลังจากเพิ่ม Meta Tags แล้ว ต้องเช็คว่าใช้งานได้จริง โดยใช้เครื่องมือ

✅ Google Rich Results Test – https://search.google.com/test/rich-results
✅ Facebook Sharing Debugger – https://developers.facebook.com/tools/debug/
✅ Twitter Card Validator – https://cards-dev.twitter.com/validator

📌 สรุป

✅ ใช้ <Head> ใน Next.js เพื่อเพิ่ม Meta Tags
✅ เพิ่ม Open Graph Tags เพื่อให้ Social Media แสดงผลสวยๆ
✅ ใช้ Twitter Card Tags เพื่อให้เว็บดูดีเวลาทวีต
✅ ใช้ SSR และ SSG เพื่อปรับ Meta Tags ตามเนื้อหาแต่ละหน้า
✅ เช็คว่า Meta Tags ทำงานจริงผ่านเครื่องมือของ Google, Facebook และ Twitter

พร้อมทำ SEO ให้เว็บ Next.js ของคุณติดอันดับ Google แล้วหรือยัง? 🚀

การแสดงผลตารางใน 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 คือตัวเลือกที่ดีสุด! 

การใช้ MongoDB กับ Next.js

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

ในบทความนี้เราจะมาทำความเข้าใจวิธีการ ใช้ MongoDB กับ Next.js โดยจะอธิบายตั้งแต่การติดตั้งการเชื่อมต่อกับ MongoDB ไปจนถึงการใช้งานฐานข้อมูลใน API Routes ของ Next.js และแนวทางการออกแบบระบบอย่างมีประสิทธิภาพ

ทำไม MongoDB ถึงเหมาะสมกับ Next.js?

1. การจัดการข้อมูลแบบ NoSQL

MongoDB เป็นฐานข้อมูลประเภท NoSQL ที่เก็บข้อมูลในรูปแบบของเอกสาร (Document) ซึ่งแตกต่างจากฐานข้อมูล SQL ที่เก็บข้อมูลในตารางแบบเชิงสัมพันธ์ (Relational Database) โดยเอกสารใน MongoDB จะเก็บข้อมูลในรูปแบบของ JSON-like หรือ BSON (Binary JSON) ที่สามารถเก็บข้อมูลในโครงสร้างที่ยืดหยุ่นได้ ซึ่งเหมาะสำหรับการพัฒนาเว็บแอปที่ต้องการการจัดเก็บข้อมูลที่ไม่ตายตัว

2. ความยืดหยุ่นในการขยายตัว

MongoDB รองรับการขยายตัวได้ง่ายและมีการจัดการข้อมูลที่สามารถทำงานได้ดีในสถานการณ์ที่ข้อมูลจำนวนมากมีการเปลี่ยนแปลงตลอดเวลา โดยที่ไม่ต้องกังวลเรื่องโครงสร้างที่คงที่

3. ทำงานได้ดีร่วมกับ Next.js

Next.js รองรับการทำงานทั้งฝั่งเซิร์ฟเวอร์และไคลเอนต์ (Client-Side & Server-Side Rendering) ซึ่งสามารถนำ MongoDB มาใช้งานร่วมกันได้อย่างลงตัว ไม่ว่าจะเป็นการจัดการข้อมูลในฝั่งเซิร์ฟเวอร์โดยใช้ API Routes หรือการดึงข้อมูลแบบ Server-Side Rendering (SSR)

ขั้นตอนการติดตั้งและการเชื่อมต่อ MongoDB กับ Next.js

1. การติดตั้ง MongoDB และไลบรารีที่จำเป็น

ก่อนอื่น, คุณจะต้องติดตั้งไลบรารีที่จำเป็นในการเชื่อมต่อ MongoDB กับ Next.js ซึ่งเราจะแนะนำการใช้ Mongoose ซึ่งเป็น ORM (Object-Relational Mapping) ที่ทำให้การทำงานกับ MongoDB ง่ายขึ้น

การติดตั้ง Mongoose สามารถทำได้โดยใช้คำสั่ง:

npm install mongoose

หรือหากใช้ yarn:

yarn add mongoose

2. การตั้งค่าการเชื่อมต่อ MongoDB

จากนั้น, เราจะสร้างไฟล์สำหรับการเชื่อมต่อกับ MongoDB ในโปรเจกต์ของเรา ในตัวอย่างนี้, เราจะสร้างไฟล์ lib/mongodb.js เพื่อจัดการการเชื่อมต่อกับฐานข้อมูล

// lib/mongodb.js
import mongoose from 'mongoose';

const MONGO_URI = 'mongodb://localhost:27017/your_database_name';

if (!MONGO_URI) {
  throw new Error('Please define the MONGO_URI environment variable');
}

let cached = global.mongoose;

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

async function connectToDatabase() {
  if (cached.conn) {
    return cached.conn;
  }

  if (!cached.promise) {
    cached.promise = mongoose.connect(MONGO_URI).then((mongoose) => {
      return mongoose;
    });
  }

  cached.conn = await cached.promise;
  return cached.conn;
}

export default connectToDatabase;

ในไฟล์นี้ เราจะเชื่อมต่อกับฐานข้อมูล MongoDB โดยใช้ URI ที่คุณได้ตั้งค่าไว้ใน .env หรือในโค้ด หากคุณใช้ MongoDB Atlas ก็สามารถใช้ URI ของ Atlas ได้เช่นกัน

3. การสร้าง Model ของ MongoDB

เมื่อเชื่อมต่อกับฐานข้อมูลแล้ว, คุณต้องสร้าง Model สำหรับการทำงานกับข้อมูลใน MongoDB โดยการใช้ Mongoose เพื่อให้สามารถใช้งานข้อมูลได้อย่างง่ายดาย

ตัวอย่างการสร้าง Model ของ MongoDB:

// models/User.js
import mongoose from 'mongoose';

const UserSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true },
});

export default mongoose.models.User || mongoose.model('User', UserSchema);

ในที่นี้ เราได้สร้าง User Schema ที่ใช้เก็บข้อมูลของผู้ใช้ เช่น name และ email โดยใช้ Mongoose ที่จะช่วยให้การจัดการข้อมูลใน MongoDB เป็นไปอย่างสะดวก

4. การใช้ MongoDB ใน API Routes ของ Next.js

ตอนนี้เราได้ตั้งค่าการเชื่อมต่อกับ MongoDB และสร้าง Model เรียบร้อยแล้ว, ขั้นตอนต่อไปคือการใช้งาน MongoDB ใน API Routes ของ Next.js เพื่อทำงานกับข้อมูล เช่น การดึงข้อมูลจาก MongoDB หรือการเพิ่มข้อมูลใหม่

ตัวอย่างการดึงข้อมูลจาก MongoDB ใน API Route:

// pages/api/users.js
import connectToDatabase from '../../lib/mongodb';
import User from '../../models/User';

export default async function handler(req, res) {
  await connectToDatabase();

  if (req.method === 'GET') {
    try {
      const users = await User.find();
      res.status(200).json(users);
    } catch (error) {
      res.status(500).json({ error: 'Unable to fetch users' });
    }
  }
}

ในตัวอย่างนี้, เราจะใช้ GET เพื่อดึงข้อมูลจาก MongoDB และส่งข้อมูลในรูปแบบ JSON ไปยังผู้ใช้งาน

5. การเพิ่มข้อมูลใน MongoDB ผ่าน API Route

การเพิ่มข้อมูลใน MongoDB ก็สามารถทำได้โดยใช้ POST ใน API Route ซึ่งสามารถรับข้อมูลจาก req.body และทำการบันทึกข้อมูลไปยังฐานข้อมูลได้

// pages/api/users.js
import connectToDatabase from '../../lib/mongodb';
import User from '../../models/User';

export default async function handler(req, res) {
  await connectToDatabase();

  if (req.method === 'POST') {
    const { name, email } = req.body;

    try {
      const newUser = new User({ name, email });
      await newUser.save();
      res.status(201).json(newUser);
    } catch (error) {
      res.status(500).json({ error: 'Unable to add user' });
    }
  }
}

ในตัวอย่างนี้, เราจะใช้ POST เพื่อรับข้อมูลจาก req.body และเพิ่มผู้ใช้ใหม่เข้าไปใน MongoDB

6. การใช้ MongoDB กับ Server-Side Rendering (SSR)

หนึ่งในคุณสมบัติที่ดีของ Next.js คือการรองรับ Server-Side Rendering (SSR) ซึ่งทำให้เราสามารถดึงข้อมูลจากฐานข้อมูลมาแสดงผลบนหน้าเว็บก่อนที่หน้านั้นจะโหลดเสร็จ

ตัวอย่างการใช้งาน MongoDB ใน getServerSideProps (SSR):

// pages/index.js
import connectToDatabase from '../lib/mongodb';
import User from '../models/User';

export async function getServerSideProps() {
  await connectToDatabase();

  const users = await User.find();

  return {
    props: { users: JSON.parse(JSON.stringify(users)) },
  };
}

export default function Home({ users }) {
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user, index) => (
          <li key={index}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

ในตัวอย่างนี้, เราใช้ getServerSideProps เพื่อดึงข้อมูลจาก MongoDB และส่งข้อมูลไปยังหน้าเว็บเพื่อแสดงผลในครั้งแรกที่โหลดหน้า

สรุป

การใช้ MongoDB ร่วมกับ Next.js เป็นวิธีที่ยอดเยี่ยมในการสร้างเว็บแอปที่สามารถจัดการข้อมูลได้อย่างมีประสิทธิภาพ โดย MongoDB ให้ความยืดหยุ่นในการจัดเก็บข้อมูลแบบ NoSQL และ Next.js ให้เครื่องมือในการสร้างเว็บแอปที่เร็วและรองรับการเรนเดอร์แบบ Server-Side Rendering (SSR) การเชื่อมต่อ MongoDB กับ Next.js ไม่ได้ยากเกินไปและสามารถช่วยให้คุณสร้างเว็บแอปที่มีฟีเจอร์ครบถ้วนและมีประสิทธิภาพได้

การเชื่อมต่อ MySQL กับ Next.js

ในยุคปัจจุบันที่การพัฒนาเว็บแอปพลิเคชันมีความหลากหลายและต้องการการจัดการข้อมูลที่มีประสิทธิภาพมากขึ้น การใช้ฐานข้อมูลที่สามารถจัดเก็บข้อมูลได้ดีและเชื่อถือได้ยังคงเป็นสิ่งสำคัญ สำหรับแอปพลิเคชันหลายๆ ตัวที่เราใช้งานในชีวิตประจำวัน MySQL ยังคงเป็นหนึ่งในฐานข้อมูลที่ได้รับความนิยมอย่างมาก เพราะมีประสิทธิภาพสูงในการจัดการข้อมูลในรูปแบบเชิงสัมพันธ์ (Relational Database) ซึ่งสามารถตอบโจทย์การจัดเก็บข้อมูลที่ซับซ้อนได้ดี

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

ทำไมต้องใช้ MySQL?

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

1. การจัดการข้อมูลแบบเชิงสัมพันธ์: MySQL เป็นฐานข้อมูลที่มีความสามารถในการจัดการข้อมูลที่มีความสัมพันธ์กันได้ดี เช่น ข้อมูลในตารางลูกค้า, ออเดอร์ หรือข้อมูลที่เกี่ยวข้องกับผลิตภัณฑ์
2. ประสิทธิภาพสูง: MySQL ถูกออกแบบมาให้สามารถรองรับการทำงานในปริมาณข้อมูลจำนวนมากได้ดี
3. ความน่าเชื่อถือ: MySQL เป็นฐานข้อมูลที่มีความเสถียรสูง และมีการใช้งานกันอย่างแพร่หลาย โดยได้รับการพัฒนาและอัปเดตอย่างต่อเนื่อง
4. ใช้งานง่าย: การเรียนรู้และใช้งาน MySQL ค่อนข้างง่ายเมื่อเทียบกับฐานข้อมูลประเภทอื่นๆ

ดังนั้น หากคุณกำลังพัฒนาแอปพลิเคชันที่ต้องการจัดเก็บข้อมูลที่เป็นระบบและสามารถจัดการได้อย่างมีประสิทธิภาพ MySQL เป็นตัวเลือกที่เหมาะสมมากๆ สำหรับโปรเจกต์ของคุณ

ขั้นตอนการเชื่อมต่อ MySQL กับ Next.js

1. การติดตั้ง MySQL ในโปรเจกต์

ในการเริ่มต้นใช้งาน MySQL ร่วมกับ Next.js เราจำเป็นต้องติดตั้งไลบรารีที่จะช่วยในการเชื่อมต่อกับฐานข้อมูล MySQL ก่อน โดยการใช้ไลบรารีที่ชื่อว่า mysql2 หรือ sequelize ซึ่งเป็นไลบรารีที่ช่วยให้การเชื่อมต่อและการทำงานกับฐานข้อมูล MySQL ง่ายขึ้น

การติดตั้งไลบรารี mysql2

npm install mysql2

หรือถ้าใช้ yarn:

yarn add mysql2

การติดตั้งไลบรารี sequelize (ถ้าต้องการใช้ ORM)

npm install sequelize mysql2

2. การตั้งค่าการเชื่อมต่อ MySQL

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

ตัวอย่างการเชื่อมต่อด้วย mysql2:

// lib/db.js
import mysql from 'mysql2';

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'your_database_name'
});

connection.connect((err) => {
  if (err) {
    console.error('error connecting: ' + err.stack);
    return;
  }
  console.log('connected as id ' + connection.threadId);
});

export default connection;

ในตัวอย่างนี้ เราจะสร้างการเชื่อมต่อไปยังฐานข้อมูล MySQL ด้วยไลบรารี mysql2 โดยการตั้งค่า เช่น host, user, password, และ database ที่ใช้ในการเชื่อมต่อ

ตัวอย่างการเชื่อมต่อด้วย sequelize:

// lib/sequelize.js
import { Sequelize } from 'sequelize';

const sequelize = new Sequelize('your_database_name', 'root', 'password', {
  host: 'localhost',
  dialect: 'mysql',
});

export default sequelize;

การใช้ sequelize จะช่วยให้เราเขียนโค้ดในรูปแบบของ ORM (Object-Relational Mapping) ซึ่งทำให้เราสามารถใช้ JavaScript ในการจัดการข้อมูลในฐานข้อมูลได้ง่ายขึ้น

3. การใช้ฐานข้อมูลใน API Routes ของ Next.js

หนึ่งในคุณสมบัติที่ดีของ Next.js คือการรองรับ API Routes ซึ่งช่วยให้เราสามารถสร้าง API ภายในแอปได้ง่ายๆ โดยไม่ต้องตั้งค่าเซิร์ฟเวอร์เพิ่มเติม การใช้ API Routes นี้ เราสามารถเชื่อมต่อกับ MySQL เพื่อดึงข้อมูล หรือบันทึกข้อมูลได้

ตัวอย่างการดึงข้อมูลจาก MySQL ใน API Route:

// pages/api/users.js
import db from '../../lib/db';  // ถ้าใช้ mysql2
// หรือ
// import sequelize from '../../lib/sequelize';  // ถ้าใช้ sequelize

export default async function handler(req, res) {
  if (req.method === 'GET') {
    db.query('SELECT * FROM users', (err, results) => {
      if (err) {
        res.status(500).json({ error: 'Database query failed' });
        return;
      }
      res.status(200).json(results);
    });
  }
}

ในตัวอย่างนี้เราจะดึงข้อมูลจากตาราง users ในฐานข้อมูล MySQL และส่งข้อมูลกลับไปยังผู้ใช้งานในรูปแบบ JSON

ถ้าใช้ sequelize:

// pages/api/users.js
import sequelize from '../../lib/sequelize';
import { User } from '../../models'; // สมมติว่าเรามีโมเดล User

export default async function handler(req, res) {
  if (req.method === 'GET') {
    try {
      const users = await User.findAll();
      res.status(200).json(users);
    } catch (err) {
      res.status(500).json({ error: 'Database query failed' });
    }
  }
}

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

4. การเพิ่มข้อมูลใน MySQL ผ่าน API Route

การเพิ่มข้อมูลในฐานข้อมูลก็สามารถทำได้ง่ายๆ ผ่าน API Route ของ Next.js โดยเราสามารถรับข้อมูลจาก request body และใช้คำสั่ง SQL หรือ ORM เพื่อเพิ่มข้อมูลได้

ตัวอย่างการเพิ่มข้อมูลใน MySQL:

// pages/api/users.js
import db from '../../lib/db';  // ถ้าใช้ mysql2

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body;

    db.query('INSERT INTO users (name, email) VALUES (?, ?)', [name, email], (err, results) => {
      if (err) {
        res.status(500).json({ error: 'Database insertion failed' });
        return;
      }
      res.status(200).json({ message: 'User added successfully' });
    });
  }
}

ถ้าใช้ sequelize:

// pages/api/users.js
import sequelize from '../../lib/sequelize';
import { User } from '../../models'; // สมมติว่าเรามีโมเดล User

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body;

    try {
      const newUser = await User.create({ name, email });
      res.status(200).json(newUser);
    } catch (err) {
      res.status(500).json({ error: 'Database insertion failed' });
    }
  }
}

5. การใช้งาน MySQL ในการสร้างแอปพลิเคชันที่มีฟีเจอร์มากขึ้น

จากขั้นตอนเบื้องต้นที่เราได้เรียนรู้การเชื่อมต่อ MySQL กับ Next.js แล้ว คุณสามารถนำความรู้เหล่านี้ไปใช้ในการสร้างแอปพลิเคชันที่มีฟีเจอร์หลากหลาย เช่น ระบบการจัดการผู้ใช้ (User Management System), การจัดการคำสั่งซื้อ (Order Management System), หรือการเก็บข้อมูลสำหรับแอปพลิเคชันที่ต้องการข้อมูลที่มีความสัมพันธ์กัน

สรุป

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

การใช้ Firebase Firestore กับ Next.js

การพัฒนาแอปพลิเคชันที่มีฟีเจอร์แบบเรียลไทม์ หรือระบบที่มีฐานข้อมูลในแบบ cloud ไม่สามารถหลีกเลี่ยงการใช้บริการฐานข้อมูลที่ทันสมัยและรองรับการเชื่อมต่อที่รวดเร็วได้ หนึ่งในตัวเลือกที่ได้รับความนิยมมากคือ Firebase ซึ่งเป็นเครื่องมือของ Google ที่ช่วยให้การพัฒนาแอปพลิเคชันบนมือถือหรือเว็บแอปง่ายขึ้น รวมทั้งการใช้งาน Firestore ฐานข้อมูล NoSQL ที่ทำงานบน Cloud ที่สามารถให้บริการข้อมูลแบบเรียลไทม์ได้

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

Firebase Firestore คืออะไร?

Firebase Firestore เป็นฐานข้อมูล NoSQL ที่รองรับการจัดเก็บข้อมูลในรูปแบบเอกสาร (Document) และคอลเล็กชัน (Collection) ซึ่งข้อมูลใน Firestore สามารถจัดเก็บเป็นชุดของคีย์และค่าที่มีความยืดหยุ่นสูง พร้อมกับการรองรับฟีเจอร์หลายๆ อย่าง เช่น การซิงค์ข้อมูลแบบเรียลไทม์ การปรับขนาดระบบได้ดี การทำงานออฟไลน์ และการเชื่อมต่อกับบริการต่างๆ ของ Firebase

ทำไมต้องใช้ Firebase Firestore กับ Next.js?

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

การนำ Firebase Firestore มาใช้ร่วมกับ Next.js ช่วยให้เราสามารถพัฒนาแอปที่สามารถจัดเก็บและดึงข้อมูลจากฐานข้อมูลบน Cloud ได้อย่างสะดวก นอกจากนี้ยังช่วยให้สามารถใช้คุณสมบัติที่ดีของ Firestore เช่น การดึงข้อมูลแบบเรียลไทม์ ซึ่งเหมาะกับการสร้างแอปพลิเคชันที่ต้องการการอัปเดตข้อมูลทันที เช่น การแสดงผลของข้อมูลที่เปลี่ยนแปลงตลอดเวลา

ขั้นตอนการติดตั้งและใช้งาน Firebase Firestore กับ Next.js

1. การติดตั้ง Firebase ในโปรเจกต์ Next.js

เริ่มต้นจากการติดตั้ง Firebase SDK โดยใช้คำสั่ง npm หรือ yarn

npm install firebase

หรือ

yarn add firebase

จากนั้นให้สร้างไฟล์สำหรับการตั้งค่าการเชื่อมต่อกับ Firebase โดยปกติแล้วเราจะสร้างไฟล์ firebase.js ในโฟลเดอร์ lib หรือ utils เช่น:

// lib/firebase.js
import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID'
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app(); // ถ้ามีการเชื่อมต่อ Firebase อยู่แล้วให้ใช้การเชื่อมต่อนั้น
}

const firestore = firebase.firestore();

export { firestore };

ในไฟล์นี้คุณจะต้องใส่ค่าคอนฟิก Firebase ที่ได้จาก Firebase Console ซึ่งประกอบด้วย apiKey, authDomain, projectId, และอื่นๆ

2. การเชื่อมต่อกับ Firestore และการดึงข้อมูล

เมื่อเชื่อมต่อกับ Firebase แล้ว เราสามารถดึงข้อมูลจาก Firestore มาใช้งานได้โดยการใช้คำสั่ง Firestore API

ตัวอย่างการดึงข้อมูลจาก Firestore ใน Next.js:

// pages/index.js
import { useEffect, useState } from 'react';
import { firestore } from '../lib/firebase';

const Home = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const snapshot = await firestore.collection('users').get();
      const usersList = snapshot.docs.map(doc => doc.data());
      setData(usersList);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {data.map((user, index) => (
          <li key={index}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

ในตัวอย่างนี้ เราดึงข้อมูลจาก Firestore ที่คอลเล็กชัน users และแสดงผลข้อมูลในเว็บเพจ

3. การอัปเดตข้อมูลใน Firestore

การอัปเดตข้อมูลใน Firestore สามารถทำได้ง่ายมากๆ เช่น การเพิ่มข้อมูลใหม่ หรือการอัปเดตข้อมูลที่มีอยู่แล้ว:

// การเพิ่มข้อมูล
const addUser = async () => {
  await firestore.collection('users').add({
    name: 'John Doe',
    email: 'john.doe@example.com'
  });
};

// การอัปเดตข้อมูล
const updateUser = async (userId) => {
  await firestore.collection('users').doc(userId).update({
    name: 'Jane Doe'
  });
};

4. การใช้งาน Firestore แบบ Real-Time

หนึ่งในฟีเจอร์ที่ยอดเยี่ยมของ Firestore คือการดึงข้อมูลแบบเรียลไทม์ โดยใช้คำสั่ง onSnapshot ซึ่งจะทำให้ข้อมูลในแอปของคุณอัปเดตอัตโนมัติเมื่อมีการเปลี่ยนแปลงใน Firestore

useEffect(() => {
  const unsubscribe = firestore.collection('users').onSnapshot(snapshot => {
    const usersList = snapshot.docs.map(doc => doc.data());
    setData(usersList);
  });

  // ทำความสะอาดการเชื่อมต่อเมื่อคอมโพเนนต์ถูก unmount
  return () => unsubscribe();
}, []);

5. การจัดการกับข้อมูลออฟไลน์

Firestore มีฟีเจอร์ที่สามารถทำงานออฟไลน์ได้ ซึ่งหมายความว่าผู้ใช้สามารถใช้งานแอปได้แม้จะไม่มีการเชื่อมต่ออินเทอร์เน็ต เมื่อมีการเชื่อมต่อใหม่ ข้อมูลจะถูกซิงค์อัตโนมัติ

สรุป

การใช้ Firebase Firestore กับ Next.js เป็นการผสมผสานที่ยอดเยี่ยมสำหรับการพัฒนาแอปที่มีความสามารถในการจัดการข้อมูลแบบเรียลไทม์ และรองรับการพัฒนาแอปที่มีประสิทธิภาพ ทั้งในแง่ของการจัดการข้อมูลและการแสดงผลบนหน้าเว็บ โดยที่ Firebase Firestore จะช่วยให้การพัฒนาแอปเป็นเรื่องง่ายขึ้น และ Next.js ก็สามารถเพิ่มความเร็วให้กับแอปได้

การทำงานร่วมกันระหว่าง Firebase และ Next.js จะช่วยให้คุณสามารถสร้างแอปพลิเคชันที่ทันสมัยและรองรับการทำงานที่หลากหลายได้อย่างมีประสิทธิภาพ

การใช้ getInitialProps และเมื่อไหร่ควรใช้

ถ้าคุณเคยใช้ Next.js มาสักพัก น่าจะเคยได้ยินเกี่ยวกับ getInitialProps ซึ่งเป็นฟังก์ชันที่ใช้ดึงข้อมูลมาแสดงบนหน้าเว็บได้ทั้ง ฝั่งเซิร์ฟเวอร์ (Server-side) และ ฝั่งไคลเอนต์ (Client-side) แต่เดี๋ยวก่อน! ทำไมมันถึงดูเหมือน SSR และ CSR รวมกันล่ะ?

วันนี้เราจะมาเจาะลึกว่า getInitialProps ทำงานยังไง ควรใช้เมื่อไหร่ และ Next.js เวอร์ชันใหม่ยังควรใช้มันอยู่มั้ย? ถ้าพร้อมแล้ว ไปดูกันเลย! 🚀

📌 getInitialProps คืออะไร?

getInitialProps เป็นฟังก์ชันพิเศษของ Next.js ที่ใช้ดึงข้อมูลให้กับ Page Component โดยสามารถทำงานได้ทั้งฝั่ง เซิร์ฟเวอร์ และ ไคลเอนต์ ขึ้นอยู่กับว่าเพจนั้นโหลดมาแบบไหน

• รันบนเซิร์ฟเวอร์ ถ้าผู้ใช้เข้าหน้าเว็บโดยตรง (getInitialProps ทำงานเหมือน SSR)
• รันบนไคลเอนต์ ถ้าผู้ใช้ไปยังหน้านั้นผ่านการ Client-side Navigation (เช่น กดลิงก์ไปที่หน้าใหม่โดยไม่โหลดเว็บใหม่)

🔍 ข้อดีของ getInitialProps

• ใช้ดึงข้อมูลได้ทั้งจากเซิร์ฟเวอร์และไคลเอนต์
• ใช้กับ Custom App (_app.js) ได้
• เหมาะสำหรับแอปที่ต้องการโหลดข้อมูลแบบ Hybrid (SSR + CSR)

❌ ข้อเสียของ getInitialProps

• ทำให้ Automatic Static Optimization ใช้ไม่ได้ เพราะ Next.js มองว่ามันเป็น Dynamic Page
• ช้ากว่า getStaticProps เพราะต้องรันโค้ดทุกครั้งที่โหลดหน้า
• Next.js ไม่แนะนำให้ใช้ในเวอร์ชันใหม่ เนื่องจาก SSR และ SSG มีฟังก์ชันที่แยกกันชัดเจนกว่า

📌 วิธีใช้ getInitialProps

ลองมาดูตัวอย่างการใช้งานกัน สมมติว่าเราต้องการดึงข้อมูลจาก API และแสดงผลในหน้าเว็บ

import React from 'react';

const Blog = ({ posts }) => {
  return (
    <div>
      <h1>บล็อก (getInitialProps)</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

Blog.getInitialProps = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return { posts };
};

export default Blog;

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

• เราสร้างคอมโพเนนต์ Blog และรับ posts เป็น props
• ใช้ Blog.getInitialProps เพื่อดึงข้อมูลจาก API
• ถ้าผู้ใช้โหลดหน้า /blog ตรง ๆ → getInitialProps จะรันบนเซิร์ฟเวอร์
• ถ้าผู้ใช้กดลิงก์มาจากหน้าอื่น → getInitialProps จะรันบนไคลเอนต์

📌 getInitialProps ใช้กับ _app.js ได้!

หนึ่งในข้อดีของ getInitialProps คือมันสามารถใช้ได้ในไฟล์ _app.js ซึ่งเป็นไฟล์หลักของ Next.js ที่ใช้ควบคุมทุกหน้าในแอปของเรา

ตัวอย่างการใช้ getInitialProps ใน _app.js เพื่อดึงข้อมูล User Authentication

import App from 'next/app';

function MyApp({ Component, pageProps, user }) {
  return (
    <div>
      <p>ผู้ใช้ปัจจุบัน: {user?.name || 'Guest'}</p>
      <Component {...pageProps} />
    </div>
  );
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);

  // สมมติว่าเราเช็ก Token และดึงข้อมูลผู้ใช้จาก API
  const user = await fetchUserFromAPI(appContext.ctx);

  return { ...appProps, user };
};

export default MyApp;

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

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

📌 เมื่อไหร่ควรใช้ getInitialProps?

✅ ใช้ getInitialProps ถ้า:

• ต้องการดึงข้อมูล ทั้งฝั่งเซิร์ฟเวอร์และไคลเอนต์
• ต้องการดึงข้อมูลใน _app.js (แต่ปัจจุบันแนะนำให้ใช้ getServerSideProps หรือ API Context แทน)
• ต้องการให้หน้ามี Dynamic Data แต่ไม่ต้องการใช้ SSR เต็มรูปแบบ

❌ ไม่ควรใช้ getInitialProps ถ้า:

• หน้าเว็บไม่จำเป็นต้องโหลดข้อมูลใหม่ทุกครั้ง → ควรใช้ getStaticProps แทน
• ต้องการโหลดเร็ว ๆ → SSR อาจช้าไป ควรใช้ CSR หรือ SSG
• ใช้ Next.js เวอร์ชันใหม่ → Next.js แนะนำให้ใช้ getServerSideProps หรือ getStaticProps แทน

📌 เปรียบเทียบ getInitialProps vs getServerSideProps vs getStaticProps

Feature	getInitialProps	getServerSideProps	getStaticProps
ดึงข้อมูลตอน	ทุกครั้งที่โหลดหน้า (SSR) หรือเมื่อกดลิงก์ (CSR)	ทุกครั้งที่โหลดหน้า (SSR)	ตอน Build Time เท่านั้น (SSG)
เหมาะกับข้อมูลที่	เปลี่ยนแปลงบ่อย และต้องการทำงานทั้ง SSR + CSR	เปลี่ยนแปลงบ่อย และต้องการ SSR 100%	คงที่ หรือเปลี่ยนนาน ๆ ที
โหลดเร็วกว่า	❌ ช้ากว่าเพราะต้องรองรับทั้ง SSR และ CSR	❌ โหลดช้าเพราะต้องรอเซิร์ฟเวอร์	✅ โหลดไวเพราะเป็น Static
ใช้กับ _app.js ได้	✅ ใช้ได้	❌ ใช้ไม่ได้	❌ ใช้ไม่ได้
Next.js แนะนำให้ใช้?	❌ ไม่แนะนำแล้ว	✅ ใช้แทน SSR	✅ ใช้แทน SSG

💡 สรุปง่าย ๆ:

• อย่าใช้ getInitialProps ใน Next.js เวอร์ชันใหม่ → ใช้ getServerSideProps หรือ getStaticProps แทน
• ถ้าต้องการ SSR ใช้ getServerSideProps
• ถ้าต้องการ Static Site ใช้ getStaticProps

📌 สรุป

getInitialProps เคยเป็นฟีเจอร์ที่ได้รับความนิยมใน Next.js แต่ปัจจุบัน Next.js แนะนำให้ใช้ SSR (getServerSideProps) หรือ SSG (getStaticProps) แทน เพราะมันแยกหน้าที่กันชัดเจนกว่าและทำให้การโหลดเว็บเร็วขึ้น

ถ้าคุณยังใช้ getInitialProps อยู่ในโปรเจ็กต์เก่า ลองเปลี่ยนมาใช้ getServerSideProps หรือ getStaticProps ดู แล้วคุณจะเห็นความแตกต่าง! 🚀

การใช้ getServerSideProps สำหรับ Server-side Rendering (SSR)

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

วันนี้เราจะมาดูกันว่า getServerSideProps ทำงานยังไง ใช้ยังไง และเมื่อไหร่ควรใช้ พร้อมเทคนิคดี ๆ ที่จะช่วยให้คุณใช้งาน SSR ได้อย่างมีประสิทธิภาพสุด ๆ! 🚀

📌 Server-side Rendering (SSR) คืออะไร?

Server-side Rendering (SSR) คือเทคนิคที่ให้เซิร์ฟเวอร์ประมวลผลหน้าเว็บ ทุกครั้งที่มีการรีเควสต์ ซึ่งต่างจาก Static Site Generation (SSG) ที่สร้างหน้า HTML ล่วงหน้าตอน Build Time

🔍 ข้อดีของ SSR:

• ข้อมูลอัปเดตแบบเรียลไทม์ เพราะดึงข้อมูลใหม่ทุกครั้งที่มีการโหลดหน้า
• เหมาะกับหน้าที่ต้องการข้อมูลเฉพาะตัวของผู้ใช้ เช่น Dashboard หรือ Personalized Content
• ไม่ต้องรอ Build ใหม่เวลาข้อมูลเปลี่ยน

❌ ข้อเสียของ SSR:

•     โหลดช้ากว่า SSG เพราะต้องรอให้เซิร์ฟเวอร์ประมวลผลก่อน
•     ใช้ทรัพยากรเซิร์ฟเวอร์มากขึ้น เพราะต้องประมวลผลทุกครั้งที่มีรีเควสต์
•     แคชยากกว่า เพราะข้อมูลเปลี่ยนแปลงตลอด

📌 getServerSideProps คืออะไร?

getServerSideProps เป็นฟังก์ชันพิเศษของ Next.js ที่ใช้ดึงข้อมูลจากเซิร์ฟเวอร์แบบ Real-time ก่อนที่จะแสดงผลให้ผู้ใช้

• เรียกใช้ ทุกครั้งที่มีการโหลดหน้า (ไม่มีการแคช)
• ทำงานเฉพาะฝั่งเซิร์ฟเวอร์เท่านั้น (รันบน Node.js)
• สามารถดึงข้อมูลจาก API, Database, หรือ Authentication ได้

📌 วิธีใช้ getServerSideProps

มาดูตัวอย่างกัน สมมติว่าเราต้องการดึงข้อมูลโพสต์แบบเรียลไทม์จาก API

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

  return {
    props: {
      posts,
    },
  };
}

export default function Blog({ posts }) {
  return (
    <div>
      <h1>บล็อกของเรา (SSR)</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

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

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

📌 ส่งพารามิเตอร์ไปที่ getServerSideProps

ถ้าเรามี Dynamic Routes เช่น /posts/[id] แล้วต้องการให้เซิร์ฟเวอร์ดึงข้อมูลตาม id ที่ผู้ใช้เรียก เราสามารถใช้ context.params ได้

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const post = await res.json();

  return {
    props: { post },
  };
}

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

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

• context.params.id จะรับค่า id จาก URL
• ดึงข้อมูลเฉพาะโพสต์ที่ตรงกับ id
• ส่งข้อมูลไปที่ Component และแสดงผล

📌 ใช้ context เพื่อเข้าถึง Query String หรือ Headers

นอกจาก params แล้ว context ยังมีค่าที่เป็นประโยชน์อีกเพียบ เช่น

• context.query → ใช้ดึง Query Parameters (?page=2)
• context.req → ใช้ดึง Request Headers หรือ Session
• context.res → ใช้เซ็ต Response Headers

ตัวอย่าง: ดึงค่าจาก Query String

export async function getServerSideProps(context) {
  const page = context.query.page || 1;
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}`);
  const posts = await res.json();

  return {
    props: { posts, page },
  };
}

export default function Blog({ posts, page }) {
  return (
    <div>
      <h1>บล็อก - หน้า {page}</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

✅ ข้อดี: รองรับการเปลี่ยนหน้า (?page=2) แบบเรียลไทม์!

📌 ควรใช้ getServerSideProps เมื่อไหร่?

✅ ใช้ getServerSideProps ถ้า:

• ข้อมูลต้องอัปเดตแบบเรียลไทม์ (เช่น Dashboard, Stock Price, Weather)
• ข้อมูลขึ้นอยู่กับผู้ใช้ (เช่น หน้า Profile, Authentication)
• ต้องการ Query Parameters (?search=..., ?page=...)

❌ ไม่ควรใช้ getServerSideProps ถ้า:

• ข้อมูลเปลี่ยนแปลงไม่บ่อย → ใช้ getStaticProps ดีกว่า
• ต้องการโหลดเว็บเร็วสุด ๆ → ใช้ getStaticProps + revalidate

📌 เปรียบเทียบ getServerSideProps vs getStaticProps

Feature	getServerSideProps (SSR)	getStaticProps (SSG)
ดึงข้อมูลตอน	ทุกครั้งที่โหลดหน้า	ตอน Build Time เท่านั้น
เหมาะกับข้อมูลที่	เปลี่ยนแปลงบ่อย	คงที่ หรือเปลี่ยนนาน ๆ ที
โหลดเร็วกว่า	❌ ต้องรอเซิร์ฟเวอร์	✅ โหลดไว เพราะเป็น Static
ใช้งานร่วมกับ API	✅ ดึงข้อมูลเรียลไทม์	✅ ดึง API ได้ตอน Build
SEO	✅ ดี	✅ ดีมาก

💡 สรุปง่าย ๆ:

• ถ้าเป็นข้อมูลที่ไม่ค่อยเปลี่ยน ใช้ getStaticProps
• ถ้าเป็นข้อมูลที่เปลี่ยนตลอด ใช้ getServerSideProps

📌 สรุป

getServerSideProps เป็นฟังก์ชันที่ช่วยให้ Next.js ทำ SSR ได้ง่าย ๆ โดย:

• ดึงข้อมูลจากเซิร์ฟเวอร์ ทุกครั้งที่มีการโหลดหน้า
• ใช้ร่วมกับ Dynamic Routes และ Query Parameters ได้
• เหมาะสำหรับข้อมูลที่เปลี่ยนแปลงตลอดเวลา หรือขึ้นอยู่กับผู้ใช้

ถ้าเว็บของคุณต้องการโหลดข้อมูลแบบเรียลไทม์ SSR คือทางเลือกที่ใช่! 🚀

การใช้ getStaticProps สำหรับ Static Site Generation (SSG)

ถ้าพูดถึงการสร้างเว็บที่โหลดไว ประหยัดทรัพยากรเซิร์ฟเวอร์ และเหมาะกับ SEO สุด ๆ ก็คงหนีไม่พ้น Static Site Generation (SSG) โดยเฉพาะใน Next.js ที่มีฟีเจอร์เด็ดอย่าง getStaticProps มาช่วยดึงข้อมูลตอน Build Time ทำให้เว็บของเรากลายเป็นไฟล์ HTML ที่พร้อมเสิร์ฟทันที!

วันนี้เราจะมาเจาะลึกว่า getStaticProps ทำงานยังไง ใช้ยังไง และเมื่อไหร่ควรใช้ พร้อมทั้งแชร์ทริคเด็ด ๆ ที่จะช่วยให้คุณใช้งานมันได้อย่างมือโปร! 🚀

📌 Static Site Generation (SSG) คืออะไร?

Static Site Generation (SSG) คือเทคนิคที่เราสร้างหน้าเว็บเป็นไฟล์ HTML ล่วงหน้าตั้งแต่ตอน Build ซึ่งต่างจาก Server-Side Rendering (SSR) ที่ต้องรอให้เซิร์ฟเวอร์รันโค้ดก่อนถึงจะได้ HTML หรือ Client-Side Rendering (CSR) ที่ต้องรอให้เบราว์เซอร์โหลด JavaScript แล้วค่อยแสดงผล

พูดง่าย ๆ คือ SSG ทำให้เว็บของเรากลายเป็นไฟล์ HTML ที่พร้อมเสิร์ฟเลย ซึ่งมีข้อดีหลัก ๆ ดังนี้:

✅ โหลดไวสุด ๆ เพราะเซิร์ฟเวอร์ไม่ต้องประมวลผลเพิ่ม
✅ ลดภาระของเซิร์ฟเวอร์ เพราะทุกอย่างถูก Generate มาตั้งแต่แรก
✅ SEO ดีกว่า เพราะ Bot ของ Google อ่าน HTML ได้ทันที
✅ ใช้งานร่วมกับ CDN ได้ดี ทำให้เสิร์ฟเว็บจากตำแหน่งที่ใกล้ User ที่สุด


แต่ข้อเสียก็มีเหมือนกันนะ:

❌ ใช้ไม่ได้กับข้อมูลที่เปลี่ยนแปลงตลอดเวลา เช่น Dashboard แบบ Real-Time
❌ ถ้ามีเพจเยอะมาก ๆ การ Build อาจใช้เวลานาน

📌 getStaticProps คืออะไร?

getStaticProps เป็นฟังก์ชันของ Next.js ที่ใช้ใน Page Component เพื่อดึงข้อมูลมาตอน Build Time แล้วส่งเป็น Props ให้หน้าเว็บของเรา โดยข้อมูลที่ได้มาจะถูกแปลงเป็น HTML และใช้ซ้ำได้เรื่อย ๆ โดยไม่ต้องโหลดใหม่จากเซิร์ฟเวอร์

👉 เหมาะสำหรับหน้าเว็บที่ ใช้ข้อมูลที่ไม่เปลี่ยนบ่อย เช่น

• บล็อกโพสต์
• หน้า Product Catalog
• หน้า About Us
• รายการบทความ ฯลฯ

📌 วิธีใช้ getStaticProps

ลองมาดูตัวอย่างง่าย ๆ กัน! สมมติว่าเรามี API ที่ให้ข้อมูลเกี่ยวกับโพสต์ และเราอยากดึงมันมาตอน Build Time

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

  return {
    props: {
      posts,
    },
  };
}

export default function Blog({ posts }) {
  return (
    <div>
      <h1>บล็อกของเรา</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

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

• getStaticProps จะถูกเรียกตอนที่เรารัน next build
• เราใช้ fetch ดึงข้อมูลจาก API
• ข้อมูลที่ได้จะถูกส่งไปที่ props ของคอมโพเนนต์ Blog
• หน้าเว็บนี้จะถูก Generate เป็น HTML พร้อมข้อมูลในแต่ละโพสต์

📌 getStaticProps + getStaticPaths = Dynamic Routes!

บางครั้งเราอาจมีหน้าเว็บที่ต้องใช้ Dynamic Routes เช่น /posts/[id] แล้วเราจะให้ Next.js Generate หน้าเหล่านี้เป็น Static ได้ยังไง? ใช้ getStaticPaths ไงล่ะ!

🔥 ตัวอย่างการใช้ getStaticProps + getStaticPaths

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

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },
  };
}

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

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

• getStaticPaths ใช้กำหนดว่า Next.js ต้อง Generate หน้าอะไรบ้าง
• fallback: false หมายความว่าถ้าผู้ใช้เข้าไปที่หน้า /posts/9999 ซึ่งไม่มีใน paths จะได้หน้า 404
• getStaticProps รับ params.id แล้วไปดึงข้อมูลจาก API เพื่อส่งให้ Component

📌 revalidate - อัปเดตข้อมูลโดยไม่ต้อง Build ใหม่!

ถ้าข้อมูลของเรามีการเปลี่ยนแปลง เช่น บล็อกโพสต์ที่อัปเดตบ่อย เราสามารถใช้ revalidate เพื่อให้ Next.js รีเฟรชข้อมูลหลังจากเวลาที่กำหนด (Incremental Static Regeneration หรือ ISR)

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

  return {
    props: { posts },
    revalidate: 60, // รีเฟรชข้อมูลทุก 60 วินาที
  };
}

💡 ข้อดีของ ISR

• ไม่ต้องรอ Build ใหม่เพื่ออัปเดตข้อมูล
• ลดภาระของเซิร์ฟเวอร์ เพราะ Generate เฉพาะหน้าที่มีคนเข้า

📌 ควรใช้ getStaticProps เมื่อไหร่?

✅ ใช้ getStaticProps ถ้า:

• ข้อมูลไม่เปลี่ยนแปลงบ่อย
• ต้องการโหลดหน้าเว็บเร็วและเน้น SEO
• ต้องการเสิร์ฟหน้าเว็บผ่าน CDN

❌ ไม่ควรใช้ getStaticProps ถ้า:

• ข้อมูลเปลี่ยนแปลงแบบเรียลไทม์ (ใช้ Server-Side Rendering หรือ Client-Side Fetching แทน)
• ต้องการแสดงข้อมูลที่ขึ้นอยู่กับผู้ใช้ เช่น หน้าส่วนตัว หรือแดชบอร์ด

📌 สรุป

getStaticProps เป็นเครื่องมือสุดเทพของ Next.js ที่ช่วยให้เราทำ SSG ได้ง่าย ๆ โดย:

• ดึงข้อมูลมาตอน Build Time
• ใช้ร่วมกับ getStaticPaths สำหรับ Dynamic Routes
• ใช้ revalidate เพื่ออัปเดตข้อมูลโดยไม่ต้อง Build ใหม่

ใครที่อยากทำเว็บเร็ว ๆ SEO ดี ๆ ลองใช้ getStaticProps ดู รับรองว่าชีวิตง่ายขึ้นเยอะ! 🚀

ความแตกต่างระหว่าง 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 ใช้หลายแบบร่วมกันได้ 🚀

การใช้งาน pages/ และการสร้าง Routing อัตโนมัติใน Next.js

ถ้าคุณเป็นสายเว็บที่อยากเขียนเว็บเร็ว ๆ ไม่ต้องมานั่งเซ็ต Routing เองให้ปวดหัว Next.js คือเพื่อนที่คุณต้องการ! หนึ่งในฟีเจอร์เด็ดของมันคือการใช้โฟลเดอร์ pages/ เพื่อสร้าง Routing แบบอัตโนมัติ ที่จะทำให้ชีวิตของคุณง่ายขึ้น ไม่ต้องมานั่งเขียนไฟล์ routes.js หรือกำหนด path เองแบบสมัยก่อน

บทความนี้จะพาคุณไปทำความเข้าใจว่า โฟลเดอร์ pages/ ใน Next.js ทำงานยังไง, จะใช้มันให้เกิดประโยชน์สูงสุดได้ยังไง, และ ถ้าคุณอยากใช้ Dynamic Routing หรือ API Routes ต้องทำยังไง มาเริ่มกันเลย!

 

พื้นฐานของโฟลเดอร์ pages/

ใน Next.js โฟลเดอร์ pages/ เป็นศูนย์กลางของระบบ Routing ทั้งหมด มันทำงานง่าย ๆ คือ "มีไฟล์อะไรใน pages/ ก็จะมี URL ตามไฟล์นั้น" เช่น

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

แค่สร้างไฟล์ .js หรือ .tsx ในโฟลเดอร์นี้ Next.js ก็จะสร้างเส้นทางให้โดยอัตโนมัติ ไม่ต้องเขียนโค้ดอะไรเพิ่ม!

ตัวอย่างไฟล์ pages/about.js 

export default function AboutPage() {
  return <h1>นี่คือหน้า About</h1>;
}

พอสร้างไฟล์นี้เสร็จ คุณสามารถเข้าเว็บที่ /about ได้เลยโดยไม่ต้องตั้งค่าอะไรเพิ่ม!

สร้าง Routing อัตโนมัติแบบง่าย ๆ

การสร้างหน้าใหม่

ถ้าอยากเพิ่มหน้าใหม่ ก็แค่สร้างไฟล์ใหม่ใน pages/ เท่านั้น เช่น

mkdir pages/blog
touch pages/blog/index.js

จากนั้นเพิ่มโค้ดง่าย ๆ

export default function BlogPage() {
  return <h1>ยินดีต้อนรับสู่หน้า Blog!</h1>;
}

แค่นี้คุณก็สามารถเข้าหน้า /blog ได้แล้ว ไม่ต้องไปแก้ไขอะไรเพิ่มเติมเลย 

 

Dynamic Routing: เส้นทางที่ยืดหยุ่นกว่านี้มีอีกไหม? มี!

สมมติว่าคุณอยากสร้างหน้า Blog ที่สามารถรองรับโพสต์หลาย ๆ อัน เช่น /blog/post-1, /blog/post-2 โดยไม่ต้องสร้างไฟล์ใหม่ให้แต่ละโพสต์เอง เราสามารถใช้ Dynamic Routing ได้โดยใช้เครื่องหมาย [] ในชื่อไฟล์

ตัวอย่าง:
สร้างไฟล์ pages/blog/[slug].js

import { useRouter } from 'next/router';

export default function BlogPostPage() {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>กำลังอ่านบทความ: {slug}</h1>;
}

เมื่อมีคนเข้าไปที่ /blog/my-first-post หรือ /blog/hello-world ค่า {slug} จะเปลี่ยนไปตาม URL อัตโนมัติ

 

API Routes: ใช้ pages/api/ เพื่อสร้าง API ง่าย ๆ

Next.js ไม่ได้ใช้ pages/ แค่สำหรับสร้างหน้าเว็บเท่านั้น มันยังสามารถใช้สำหรับสร้าง API ได้อีกด้วย!

ถ้าคุณสร้างไฟล์ pages/api/hello.js และเขียนโค้ดแบบนี้:

export default function handler(req, res) {
  res.status(200).json({ message: "Hello from API!" });
}

ตอนนี้คุณสามารถเรียก API นี้ได้ที่ /api/hello โดยไม่ต้องตั้งค่าเพิ่ม 

Middleware และการ Redirect Routing

ถ้าคุณอยากควบคุม Routing แบบละเอียดขึ้น Next.js ก็มีเครื่องมือให้ เช่น Middleware และ Redirects

Middleware ช่วยให้คุณสามารถจัดการกับ Request ก่อนที่มันจะไปถึงหน้าเว็บ เช่น ตรวจสอบสิทธิ์การเข้าถึง

ตัวอย่าง Middleware

สร้างไฟล์ middleware.js

import { NextResponse } from "next/server";

export function middleware(req) {
  const url = req.nextUrl.clone();
  if (!req.cookies.auth) {
    url.pathname = "/login";
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

จากนั้นกำหนดให้ Middleware ทำงานใน next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: "/old-page",
        destination: "/new-page",
        permanent: true,
      },
    ];
  },
};
 

ข้อดีของระบบ Routing อัตโนมัติใน Next.js

• ลดโค้ดที่ต้องเขียน – ไม่ต้องมานั่งเซ็ตเส้นทางเอง
• SEO-Friendly – เส้นทางแบบ Static และ Dynamic ทำงานได้ดี
• มี API Routes ในตัว – ไม่ต้องแยก Backend ออกมาเอง
• รองรับ Dynamic Routing – เหมาะกับเว็บที่มีเนื้อหาหลายหน้า
• สรุป: Next.js ทำให้ Routing ง่ายขึ้นเยอะ!

ระบบ Routing ใน Next.js ออกแบบมาให้ใช้ง่ายสุด ๆ แค่สร้างไฟล์ในโฟลเดอร์ pages/ ก็สามารถเข้าถึง URL นั้นได้เลย ไม่ต้องตั้งค่าอะไรเพิ่มเติม

ถ้าคุณต้องการ Routing ที่ซับซ้อนขึ้น เช่น Dynamic Routes หรือ API Routes Next.js ก็รองรับทั้งหมดโดยไม่ต้องพึ่ง Third-party library เลย 

พร้อมจะใช้ Next.js ในโปรเจกต์ของคุณหรือยัง? ถ้าพร้อมแล้ว ลองเล่นกับ pages/ ดูเลย แล้วคุณจะติดใจ!