การจัดการ Session และ Cookie ใน Next.js แบบเข้าใจง่าย!

Session และ Cookie เป็นสิ่งที่ขาดไม่ได้ในระบบเว็บแอป Next.js ไม่ว่าจะเป็นการ จัดการผู้ใช้ (Authentication), จดจำค่าต่างๆ หรือ รักษาความปลอดภัยของแอป

📌 บทความนี้จะอธิบายว่า Session & Cookie คืออะไร และ ใช้งานใน Next.js ยังไง พร้อมตัวอย่างโค้ดแบบจับมือทำ! 🚀

🎯 Session และ Cookie คืออะไร?

🍪 Cookie

Cookie เป็นข้อมูลเล็กๆ ที่ browser เก็บไว้ในเครื่องของผู้ใช้ โดยส่งไปพร้อมกับทุกๆ request เพื่อให้เซิร์ฟเวอร์จำผู้ใช้ได้

🔹 ใช้สำหรับ จดจำสถานะของผู้ใช้ (เช่นล็อกอินอยู่หรือเปล่า?)
🔹 สามารถตั้งค่า หมดอายุ (Expire) ได้
🔹 มีการจำกัดขนาดข้อมูล (โดยทั่วไปไม่เกิน 4KB)

🔐 Session

Session คือการเก็บข้อมูลของผู้ใช้ ฝั่งเซิร์ฟเวอร์ และอ้างอิงด้วย Session ID ที่เก็บไว้ใน Cookie

🔹 ปลอดภัยกว่าการเก็บข้อมูลใน Cookie เพราะข้อมูลไม่ได้ถูกเก็บไว้ที่ฝั่งผู้ใช้
🔹 ต้องใช้ Session Storage เช่น Redis, Database หรือ Memory
🔹 มีอายุการใช้งานตามที่กำหนด (เช่น 30 นาที)

💡 โดยทั่วไป Session & Cookie ใช้งานร่วมกัน คือ เก็บ Session ID ไว้ใน Cookie เพื่อให้เซิร์ฟเวอร์ดึงข้อมูลผู้ใช้มาใช้ได้

🚀 วิธีใช้งาน Cookie ใน Next.js

📌 ติดตั้งไลบรารีจัดการ Cookie

npm install cookie

🔹 สร้าง API ที่ใช้ Cookie ใน Next.js

📌 โค้ด: pages/api/auth/set-cookie.js

import { serialize } from "cookie";

export default function handler(req, res) {
  const token = "my_secure_token"; // จำลอง token

  res.setHeader("Set-Cookie", serialize("auth_token", token, {
    httpOnly: true, // ป้องกันการเข้าถึงจาก JavaScript
    secure: process.env.NODE_ENV === "production", // ใช้ https ในโหมด production
    maxAge: 60 * 60 * 24, // 1 วัน
    sameSite: "strict",
    path: "/",
  }));

  res.json({ message: "Cookie set!" });
}

✅ API นี้จะสร้าง auth_token แล้วฝังไว้ใน Cookie
✅ ตั้งค่า httpOnly เพื่อให้ปลอดภัยจาก XSS
✅ หมดอายุใน 1 วัน

🔹 อ่านค่า Cookie

📌 โค้ด: pages/api/auth/get-cookie.js

import { parse } from "cookie";

export default function handler(req, res) {
  const cookies = parse(req.headers.cookie || "");
  res.json({ token: cookies.auth_token || "No token found" });
}

✅ API นี้จะอ่านค่า auth_token จาก Cookie

🔹 ลบ Cookie (Logout)

📌 โค้ด: pages/api/auth/logout.js

import { serialize } from "cookie";

export default function handler(req, res) {
  res.setHeader("Set-Cookie", serialize("auth_token", "", {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    expires: new Date(0), // ลบ Cookie
    path: "/",
  }));

  res.json({ message: "Logged out!" });
}

✅ API นี้จะลบ Cookie โดยตั้งค่า expire เป็น 0

🚀 วิธีใช้งาน Session ใน Next.js

📌 ติดตั้งไลบรารี Session

npm install next-session

next-session เป็นไลบรารีที่ช่วยจัดการ Session ใน Next.js API Routes ได้ง่าย

🔹 ตั้งค่า Session Middleware

📌 โค้ด: lib/session.js

import { withIronSessionApiRoute } from "iron-session/next";

export function withSession(handler) {
  return withIronSessionApiRoute(handler, {
    cookieName: "session_cookie",
    password: "complex_password_123", // ควรใช้ env variable
    cookieOptions: {
      secure: process.env.NODE_ENV === "production",
    },
  });
}

✅ ใช้ iron-session เก็บ Session อย่างปลอดภัย
✅ ตั้งค่า session_cookie เป็นที่เก็บ Session

🔹 สร้าง API ที่ใช้ Session

📌 โค้ด: pages/api/auth/login.js

import { withSession } from "../../lib/session";

export default withSession(async function handler(req, res) {
  if (req.method !== "POST") return res.status(405).json({ error: "Method Not Allowed" });

  req.session.user = { id: 1, username: "admin" };
  await req.session.save();

  res.json({ message: "Login successful", user: req.session.user });
});

✅ เมื่อล็อกอินสำเร็จ จะเก็บข้อมูลผู้ใช้ใน Session

🔹 ดึงข้อมูลจาก Session

📌 โค้ด: pages/api/auth/me.js

import { withSession } from "../../lib/session";

export default withSession(async function handler(req, res) {
  if (!req.session.user) {
    return res.status(401).json({ error: "Not authenticated" });
  }

  res.json({ user: req.session.user });
});

✅ API นี้จะเช็กว่า มี Session ไหม? ถ้ามีแสดงข้อมูลผู้ใช้

🔹 ลบ Session (Logout)

📌 โค้ด: pages/api/auth/logout.js

import { withSession } from "../../lib/session";

export default withSession(async function handler(req, res) {
  req.session.destroy();
  res.json({ message: "Logged out!" });
});

✅ API นี้จะ ลบ Session แล้วทำให้ผู้ใช้ต้องล็อกอินใหม่

🎨 สร้างหน้า UI สำหรับ Login

📌 โค้ด: pages/index.js

import { useState } from "react";

export default function Home() {
  const [message, setMessage] = useState("");

  const login = async () => {
    const res = await fetch("/api/auth/login", { method: "POST" });
    const data = await res.json();
    setMessage(data.message);
  };

  const checkSession = async () => {
    const res = await fetch("/api/auth/me");
    const data = await res.json();
    setMessage(data.user ? `Logged in as ${data.user.username}` : "Not authenticated");
  };

  return (
    <div>
      <h1>Session & Cookie in Next.js</h1>
      <button onClick={login}>Login</button>
      <button onClick={checkSession}>Check Session</button>
      <p>{message}</p>
    </div>
  );
}

✅ UI นี้จะ Login แล้วเช็กว่า Session ยังอยู่ไหม?

🚀 ทดสอบระบบ

1. รันเซิร์ฟเวอร์ npm run dev
2. เปิด http://localhost:3000
3. กด Login แล้วดูว่ามี Session หรือไม่

🎯 สรุป

✅ Cookie – ใช้เก็บข้อมูลเล็กๆ ฝั่ง client
✅ Session – ใช้เก็บข้อมูลฝั่งเซิร์ฟเวอร์
✅ Next.js API Routes รองรับทั้ง Cookie & Session
✅ ใช้ iron-session ทำให้การจัดการ Session ง่ายขึ้น

การสร้างระบบสมาชิก (Sign-up & Login) ใน Next.js แบบเข้าใจง่าย!

อยากทำระบบ สมัครสมาชิก (Sign-up) + ล็อกอิน (Login) ใน Next.js ใช่ไหม? 🤔 ไม่ต้องห่วง บทความนี้จะพาไปทำแบบ step-by-step ตั้งแต่สร้างบัญชี, เข้ารหัสรหัสผ่าน, จัดการ JWT Token, ยันป้องกัน API รับรองว่าอ่านจบแล้วทำเป็นแน่นอน!

🎯 แผนที่ที่เราจะทำ

✅ สมัครสมาชิก (Sign-up)
✅ เข้าสู่ระบบ (Login) พร้อมสร้าง JWT Token
✅ ป้องกัน API ด้วย Token
✅ แสดงข้อมูลผู้ใช้ที่ล็อกอินอยู่

💡 ใช้แค่ Next.js API Routes, bcrypt, และ JSON Web Token (JWT) ไม่ต้องมีเซิร์ฟเวอร์เพิ่ม!

🛠️ ติดตั้ง Next.js และไลบรารีที่จำเป็น

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

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

👉 bcryptjs – ใช้เข้ารหัสรหัสผ่าน
👉 jsonwebtoken – ใช้สร้างและตรวจสอบ JWT Token

🔐 สร้าง API สำหรับ สมัครสมาชิก (Sign-up)

📌 โค้ด: pages/api/auth/signup.js

import bcrypt from "bcryptjs";

let users = []; // จำลองเป็น Database (จริงๆ ควรใช้ MongoDB หรือ PostgreSQL)

export default async function handler(req, res) {
  if (req.method !== "POST") return res.status(405).json({ error: "Method Not Allowed" });

  const { username, password } = req.body;

  if (users.find((u) => u.username === username)) {
    return res.status(400).json({ error: "Username already exists" });
  }

  const hashedPassword = await bcrypt.hash(password, 10);
  const newUser = { id: Date.now(), username, password: hashedPassword };

  users.push(newUser);
  res.json({ message: "User registered", user: { id: newUser.id, username: newUser.username } });
}

🔹 เช็กว่าชื่อผู้ใช้ซ้ำหรือไม่
🔹 เข้ารหัสรหัสผ่านก่อนบันทึก

🔑 สร้าง API สำหรับ เข้าสู่ระบบ (Login)

📌 โค้ด: pages/api/auth/login.js

import bcrypt from "bcryptjs";
import jwt from "jsonwebtoken";

let users = []; // จำลอง Database (ใช้ร่วมกับ signup.js)

export default async function handler(req, res) {
  if (req.method !== "POST") return res.status(405).json({ error: "Method Not Allowed" });

  const { username, password } = req.body;
  const user = users.find((u) => u.username === username);

  if (!user || !(await bcrypt.compare(password, user.password))) {
    return res.status(401).json({ error: "Invalid credentials" });
  }

  const token = jwt.sign({ userId: user.id, username: user.username }, "SECRET_KEY", { expiresIn: "1h" });

  res.json({ message: "Login successful", token });
}

🔐 ถ้าล็อกอินสำเร็จ จะสร้าง JWT Token และส่งกลับไปให้ client

🛡️ สร้าง API ที่ต้องใช้ Token ในการเข้าถึง

📌 โค้ด: pages/api/auth/me.js

import jwt from "jsonwebtoken";

export default function handler(req, res) {
  const { authorization } = req.headers;
 
  if (!authorization) return res.status(401).json({ error: "No token provided" });

  try {
    const token = authorization.split(" ")[1];
    const decoded = jwt.verify(token, "SECRET_KEY");
    res.json({ message: "Authenticated", user: decoded });
  } catch (err) {
    res.status(401).json({ error: "Invalid token" });
  }
}

🔒 API นี้ต้องใช้ JWT Token ใน Authorization header เพื่อเข้าถึง

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

📌 โค้ด: pages/index.js

import { useState } from "react";

export default function Home() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [token, setToken] = useState(null);
  const [message, setMessage] = useState("");

  const signup = async () => {
    const res = await fetch("/api/auth/signup", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username, password }),
    });

    const data = await res.json();
    setMessage(data.message);
  };

  const login = async () => {
    const res = await fetch("/api/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username, password }),
    });

    const data = await res.json();
    if (data.token) {
      setToken(data.token);
      setMessage("Login successful!");
    } else {
      setMessage("Login failed");
    }
  };

  const getUserData = async () => {
    const res = await fetch("/api/auth/me", {
      headers: { Authorization: `Bearer ${token}` },
    });

    const data = await res.json();
    setMessage(data.message || "Access denied");
  };

  return (
    <div>
      <h1>Sign-up & Login System</h1>
      <input type="text" placeholder="Username" onChange={(e) => setUsername(e.target.value)} />
      <input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
      <button onClick={signup}>Sign Up</button>
      <button onClick={login}>Login</button>
      <button onClick={getUserData} disabled={!token}>Get User Data</button>
      <p>{message}</p>
    </div>
  );
}

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

✅ กรอกชื่อผู้ใช้ + รหัสผ่าน แล้วกด Sign Up เพื่อสมัคร
✅ กด Login ถ้าสำเร็จจะได้ JWT Token
✅ กด Get User Data เพื่อเรียก API ที่ป้องกันไว้

🚀 ทดสอบระบบ

1. รันเซิร์ฟเวอร์ npm run dev
2. เปิด http://localhost:3000
3. ลอง Sign-up > Login > กด Get User Data

ถ้า JWT Token ถูกต้อง API จะให้เข้าถึงข้อมูลได้! 🎉

🎯 สรุป

✅ Sign-up พร้อมเข้ารหัสรหัสผ่าน
✅ Login แล้วสร้าง JWT Token
✅ ป้องกัน API ด้วย JWT
✅ ใช้ Next.js API Routes ทำระบบ Authentication แบบ stateless

🚀 พร้อมใช้ในโปรเจกต์จริง เพิ่ม Database และ refresh token ได้เลย!

การใช้ JWT Authentication ใน Next.js แบบง่ายแต่โหด

ถ้าคุณกำลังทำเว็บแอปด้วย Next.js และอยากได้ระบบล็อกอินที่ปลอดภัยแต่ไม่ยุ่งยาก JWT Authentication คือคำตอบ! 😎

JWT (JSON Web Token) เป็นมาตรฐานสำหรับการส่งข้อมูลแบบ secure ระหว่าง client และ server โดยไม่ต้องใช้ session บนเซิร์ฟเวอร์ให้ยุ่งยาก ซึ่งเหมาะกับแอปที่ต้องการ stateless authentication เช่น Next.js API Routes หรือ Serverless Functions

บทความนี้จะพาไปดูวิธีใช้งาน JWT Authentication ใน Next.js ตั้งแต่เริ่มต้น ยันการป้องกัน API ให้ปลอดภัย 💪

🎯 JWT คืออะไร?

JWT (JSON Web Token) เป็นโทเค็นเข้ารหัสที่ใช้แทน session ในการตรวจสอบตัวตน (Authentication) ของผู้ใช้ โดยมันจะถูกฝังข้อมูล เช่น user ID, role, email ไว้ข้างใน และสามารถใช้ยืนยันตัวตนในทุกๆ Request ได้

JWT มี 3 ส่วนหลักๆ คือ

• Header – บอกว่าใช้การเข้ารหัสแบบไหน
• Payload – ข้อมูลของผู้ใช้ เช่น ID, ชื่อ, อีเมล
• Signature – ใช้สำหรับยืนยันว่าโทเค็นถูกต้อง

ตัวอย่าง JWT แบบดิบๆ 👇

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEsImlhdCI6MTYxNjIzOTAyMn0.PF-0Ff_q2Gsk2tKAlDhEwMzMfJvc_ZjZbnF0qU4aMSk

ลองเอาไป Decode ได้ที่ jwt.io 😃

🛠️ ติดตั้ง Next.js และ JWT

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

npx create-next-app@latest jwt-auth-app
cd jwt-auth-app
npm install jsonwebtoken bcryptjs

👉 jsonwebtoken – ใช้สำหรับสร้างและตรวจสอบ JWT
👉 bcryptjs – ใช้เข้ารหัสรหัสผ่าน

🔐 สร้าง API สำหรับ JWT Authentication

1️⃣ สร้าง API สำหรับ ล็อกอิน และสร้าง JWT

ไปที่ pages/api/auth/login.js แล้วใส่โค้ดนี้

import jwt from "jsonwebtoken";
import bcrypt from "bcryptjs";

// ข้อมูลผู้ใช้ตัวอย่าง (จริงๆ ควรใช้ DB)
const users = [{ id: 1, username: "admin", password: "$2a$10$KIX/b0WwQJHsc/mxL6RoGuLbqVZXuWEC1Q2tB3MTzK8K4NrdH5r3W" }]; // รหัสผ่าน: 123456

export default async function handler(req, res) {
  if (req.method !== "POST") return res.status(405).json({ error: "Method Not Allowed" });

  const { username, password } = req.body;
  const user = users.find((u) => u.username === username);

  if (!user || !(await bcrypt.compare(password, user.password))) {
    return res.status(401).json({ error: "Invalid credentials" });
  }

  const token = jwt.sign({ userId: user.id, username: user.username }, "SECRET_KEY", { expiresIn: "1h" });

  res.json({ token });
}

🔹 เราใช้ bcryptjs เพื่อตรวจสอบรหัสผ่าน
🔹 ถ้าล็อกอินสำเร็จ จะสร้าง JWT Token แล้วส่งกลับไปให้ client

2️⃣ สร้าง API สำหรับ ป้องกัน API ด้วย JWT

สร้างไฟล์ pages/api/protected.js

import jwt from "jsonwebtoken";

export default function handler(req, res) {
  const { authorization } = req.headers;
 
  if (!authorization) return res.status(401).json({ error: "No token provided" });

  try {
    const token = authorization.split(" ")[1];
    const decoded = jwt.verify(token, "SECRET_KEY");
    res.json({ message: "Protected data", user: decoded });
  } catch (err) {
    res.status(401).json({ error: "Invalid token" });
  }
}

🔒 API นี้จะตรวจสอบว่า

✅ มี JWT Token ใน Authorization header ไหม
✅ ถอดรหัสแล้วถูกต้องหรือไม่

3️⃣ สร้าง API สำหรับ สมัครสมาชิก

สร้างไฟล์ pages/api/auth/register.js

import bcrypt from "bcryptjs";

export default async function handler(req, res) {
  if (req.method !== "POST") return res.status(405).json({ error: "Method Not Allowed" });

  const { username, password } = req.body;
  const hashedPassword = await bcrypt.hash(password, 10);

  // จำลองการบันทึกลง DB
  const newUser = { id: Date.now(), username, password: hashedPassword };

  res.json({ message: "User registered", user: newUser });
}

🔹 ใช้ bcryptjs เพื่อเข้ารหัสรหัสผ่านก่อนบันทึก
🔹 จำลองว่าเราเก็บข้อมูลผู้ใช้ใน DB

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

เปิดไฟล์ pages/index.js แล้วใส่โค้ดนี้

import { useState } from "react";

export default function Home() {
  const [token, setToken] = useState(null);
  const [message, setMessage] = useState("");

  const login = async () => {
    const res = await fetch("/api/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username: "admin", password: "123456" }),
    });

    const data = await res.json();
    if (data.token) {
      setToken(data.token);
      setMessage("Login successful!");
    } else {
      setMessage("Login failed");
    }
  };

  const accessProtected = async () => {
    const res = await fetch("/api/protected", {
      headers: { Authorization: `Bearer ${token}` },
    });

    const data = await res.json();
    setMessage(data.message || "Access denied");
  };

  return (
    <div>
      <h1>JWT Authentication in Next.js</h1>
      <button onClick={login}>Login</button>
      <button onClick={accessProtected} disabled={!token}>Access Protected API</button>
      <p>{message}</p>
    </div>
  );
}

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

• ปุ่ม Login จะส่ง Username และ Password ไปที่ API
• ถ้าล็อกอินสำเร็จจะได้ JWT Token มาเก็บไว้
• ปุ่ม Access Protected API จะส่ง JWT Token ไปที่ API ที่ต้องการป้องกัน

🚀 ทดสอบระบบ JWT Authentication

1.     รันเซิร์ฟเวอร์ npm run dev
2.     เปิด http://localhost:3000
3.     กดปุ่ม "Login"
4.     กดปุ่ม "Access Protected API" เพื่อดูว่ามีสิทธิ์เข้าถึงหรือไม่

🎯 สรุป

✅ JWT Authentication ทำให้ระบบล็อกอินเป็นแบบ stateless และปลอดภัย
✅ ไม่ต้องใช้ session storage บนเซิร์ฟเวอร์
✅ ใช้งานง่ายกับ Next.js API Routes

แค่นี้ก็ได้ระบบล็อกอินเทพๆ ไปใช้ในแอป Next.js แล้ว! 🔥

วิธีสร้าง REST API ด้วย Next.js และฐานข้อมูล

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

ทำไมเลือกใช้ Next.js สำหรับการสร้าง REST API?

ก่อนที่เราจะไปถึงขั้นตอนการสร้าง REST API, มาทำความเข้าใจกันก่อนว่า ทำไม Next.js ถึงเป็นเครื่องมือที่ดีสำหรับการสร้าง REST API:

1. API Routes ของ Next.js: Next.js มีฟีเจอร์ที่เรียกว่า API Routes ที่ช่วยให้คุณสามารถสร้าง API ได้ภายในโปรเจกต์เดียวกันกับแอปพลิเคชันของคุณ โดยที่ไม่จำเป็นต้องตั้งค่าเซิร์ฟเวอร์แยกต่างหาก
2. รองรับการทำงานทั้งฝั่งเซิร์ฟเวอร์และไคลเอนต์: Next.js รองรับทั้ง Server-Side Rendering (SSR) และ Static Site Generation (SSG) แต่ยังรองรับการสร้าง API สำหรับการดึงข้อมูลจากฐานข้อมูลหรือจัดการข้อมูลได้อย่างง่ายดาย
3. ความยืดหยุ่นสูง: คุณสามารถใช้ Next.js ร่วมกับฐานข้อมูลต่างๆ เช่น MySQL, MongoDB, PostgreSQL, หรือ Firebase ได้อย่างยืดหยุ่น
4. การพัฒนาแบบ Full-stack: Next.js ช่วยให้คุณสามารถสร้างแอปพลิเคชัน Full-stack ได้ในโปรเจกต์เดียว ทำให้การจัดการโค้ดและการบำรุงรักษาง่ายขึ้น

ขั้นตอนการสร้าง REST API ด้วย Next.js และฐานข้อมูล

1. การเตรียมเครื่องมือและติดตั้ง

ก่อนที่จะเริ่มสร้าง REST API ด้วย Next.js, เราต้องเตรียมเครื่องมือและติดตั้งโปรเจกต์ Next.js ก่อน โดยใช้คำสั่ง:

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

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

การติดตั้งไลบรารีฐานข้อมูล

ในที่นี้, เราจะใช้ Prisma ORM สำหรับการเชื่อมต่อกับฐานข้อมูล ซึ่งช่วยให้การจัดการข้อมูลในฐานข้อมูลเป็นไปอย่างสะดวกและมีประสิทธิภาพ

ติดตั้ง Prisma และ Database Client:

npm install prisma @prisma/client

จากนั้น, เราต้องตั้งค่าฐานข้อมูลของเราในไฟล์ schema.prisma โดยการเชื่อมต่อกับฐานข้อมูลที่เราใช้ เช่น PostgreSQL, MySQL, หรือ SQLite

ตัวอย่างการตั้งค่า Prisma สำหรับ MySQL:

ในไฟล์ prisma/schema.prisma:

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

จากนั้น, คุณสามารถใช้คำสั่งนี้เพื่อสร้าง Prisma Client:

npx prisma generate

2. การเชื่อมต่อฐานข้อมูลใน Next.js

ในขั้นตอนนี้, เราจะสร้างไฟล์สำหรับการเชื่อมต่อกับฐานข้อมูล โดยใช้ Prisma Client ที่เราติดตั้งไว้แล้ว

สร้างไฟล์ lib/prisma.js:

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default prisma;

ในไฟล์นี้, เราจะสร้าง Prisma Client ที่เชื่อมต่อกับฐานข้อมูลของเรา และจะนำไปใช้ใน API Routes ใน Next.js

3. การสร้าง REST API Route สำหรับดึงข้อมูล

Next.js รองรับการสร้าง API Routes ที่สามารถใช้ในการดึงข้อมูลจากฐานข้อมูลได้โดยตรง ตัวอย่างการสร้าง API Route สำหรับดึงข้อมูลจากฐานข้อมูล
ตัวอย่างการสร้าง API Route สำหรับดึงข้อมูลผู้ใช้:

สร้างไฟล์ pages/api/users.js:

import prisma from '../../lib/prisma';

export default async function handler(req, res) {
  if (req.method === 'GET') {
    try {
      const users = await prisma.user.findMany();
      res.status(200).json(users);
    } catch (error) {
      res.status(500).json({ error: 'Unable to fetch users' });
    }
  }
}

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

4. การสร้าง API Route สำหรับเพิ่มข้อมูล

เราสามารถใช้ POST method ในการเพิ่มข้อมูลใหม่เข้าไปในฐานข้อมูล ตัวอย่างการสร้าง API Route สำหรับเพิ่มผู้ใช้ใหม่:

สร้างไฟล์ pages/api/users.js:

import prisma from '../../lib/prisma';

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

    try {
      const newUser = await prisma.user.create({
        data: {
          name,
          email,
        },
      });

      res.status(201).json(newUser);
    } catch (error) {
      res.status(500).json({ error: 'Unable to add user' });
    }
  }
}

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

5. การสร้าง API Route สำหรับแก้ไขข้อมูล

เราสามารถใช้ PUT หรือ PATCH method ในการแก้ไขข้อมูลที่มีอยู่ในฐานข้อมูล ตัวอย่างการสร้าง API Route สำหรับการอัปเดตข้อมูลผู้ใช้:

// pages/api/users/[id].js
import prisma from '../../../lib/prisma';

export default async function handler(req, res) {
  const { id } = req.query;

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

    try {
      const updatedUser = await prisma.user.update({
        where: { id: parseInt(id) },
        data: { name, email },
      });

      res.status(200).json(updatedUser);
    } catch (error) {
      res.status(500).json({ error: 'Unable to update user' });
    }
  }
}

ในตัวอย่างนี้, เราใช้ PUT method ในการอัปเดตข้อมูลของผู้ใช้ตาม id ที่ถูกส่งมาจาก URL และทำการอัปเดตข้อมูลในฐานข้อมูล

6. การสร้าง API Route สำหรับลบข้อมูล

เราสามารถใช้ DELETE method ในการลบข้อมูลที่มีอยู่ในฐานข้อมูล ตัวอย่างการสร้าง API Route สำหรับการลบผู้ใช้:

// pages/api/users/[id].js
import prisma from '../../../lib/prisma';

export default async function handler(req, res) {
  const { id } = req.query;

  if (req.method === 'DELETE') {
    try {
      const deletedUser = await prisma.user.delete({
        where: { id: parseInt(id) },
      });

      res.status(200).json(deletedUser);
    } catch (error) {
      res.status(500).json({ error: 'Unable to delete user' });
    }
  }
}

ในตัวอย่างนี้, เราจะใช้ DELETE method ในการลบผู้ใช้ตาม id ที่ได้รับจาก URL

7. การทดสอบ API

เมื่อเราได้สร้าง REST API เสร็จเรียบร้อยแล้ว, ขั้นตอนสุดท้ายคือลองทดสอบการทำงานของ API โดยใช้เครื่องมืออย่าง Postman หรือ Insomnia เพื่อทดสอบว่า API สามารถทำงานได้ตามที่คาดหวังหรือไม่

สรุป

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

การใช้ 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 เพื่อให้แอปของคุณมีประสิทธิภาพมากยิ่งขึ้น

ใช้ Prisma เป็น ORM กับ Next.js ให้ชีวิตง่ายขึ้น!

ถ้าคุณกำลังทำ Next.js และต้องการให้เว็บของคุณเชื่อมต่อกับฐานข้อมูล อย่างง่ายและมีประสิทธิภาพ คุณคงเคยปวดหัวกับการเขียน SQL Query ตรง ๆ หรือการจัดการ Migrations ใช่ไหม? 🤯

วันนี้เราจะมาแนะนำ Prisma 🏆 ซึ่งเป็น ORM (Object-Relational Mapping) ที่ทำให้การจัดการฐานข้อมูลกับ Next.js เป็นเรื่องง่าย อ่านโค้ดสวยสะอาดตา และใช้งานได้ทั้ง TypeScript และ JavaScript

🎯 Prisma คืออะไร?

Prisma เป็น ORM ที่ช่วยให้เราทำงานกับฐานข้อมูล ง่ายขึ้น แทนที่เราจะต้องเขียน SQL ตรง ๆ เราสามารถใช้ Prisma Client เพื่อดึงหรือบันทึกข้อมูลได้สะดวกขึ้น

🔥 จุดเด่นของ Prisma

✅ Type-safe → ใช้กับ TypeScript ได้เต็มที่
✅ Readable Code → โค้ดอ่านง่ายขึ้นเยอะ
✅ Auto Migrations → จัดการโครงสร้างฐานข้อมูลได้ง่าย
✅ รองรับหลาย Database → PostgreSQL, MySQL, SQLite, MongoDB, etc.
✅ ทำงานร่วมกับ Next.js ได้ดีมาก

🛠 ติดตั้ง Prisma ใน Next.js

ก่อนอื่น เราต้องมี Next.js Project ก่อน ถ้ายังไม่มีให้สร้างด้วยคำสั่งนี้

npx create-next-app my-next-app
cd my-next-app

จากนั้น ติดตั้ง Prisma และ PostgreSQL Client (หรือ Database อื่น ๆ ที่คุณใช้)

npm install @prisma/client @prisma/cli pg

🔹 ตั้งค่า Database Connection

Prisma ใช้ไฟล์ .env เพื่อเก็บ Database URL

🔧 เปิดไฟล์ .env แล้วเพิ่มค่าต่อไปนี้

DATABASE_URL=postgresql://username:password@localhost:5432/mydatabase

📌 เปลี่ยน username, password, และ mydatabase ให้ตรงกับ Database ของคุณ

🔹 ตั้งค่า Prisma Schema

สร้างโฟลเดอร์ prisma/ และไฟล์ schema.prisma

npx prisma init

ตอนนี้โครงสร้างโปรเจกต์ของคุณควรเป็นแบบนี้

/my-next-app
 ├── /prisma
 │   └── schema.prisma
 ├── /pages
 ├── /components
 ├── .env
 ├── package.json

🔧 แก้ไขไฟล์ prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id    Int     @id @default(autoincrement())
  name  String
  email String  @unique
}

🔹 สร้าง Database Migration

ใช้คำสั่งนี้เพื่อให้ Prisma สร้างตารางใน Database ตาม Schema ที่เรากำหนด

npx prisma migrate dev --name init

📌 คำสั่งนี้จะสร้างตาราง User ในฐานข้อมูลของคุณ

🔹 ใช้ Prisma ใน API Routes ของ Next.js

💡 เราจะลองสร้าง API ที่จัดการ Users โดยใช้ Prisma

📌 อ่านข้อมูล Users (/pages/api/users.js)

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const users = await prisma.user.findMany()
    res.json(users)
  }
}

✅ ตอนนี้เรามี API ที่สามารถดึง Users ได้แล้ว

📌 เพิ่ม User ใหม่ (/pages/api/users.js)

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body
    const newUser = await prisma.user.create({
      data: { name, email }
    })
    res.json(newUser)
  }
}

✅ ตอนนี้เราสามารถเพิ่ม Users ได้แล้ว

📌 แก้ไขข้อมูล User (/pages/api/users/[id].js)

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default async function handler(req, res) {
  const { id } = req.query

  if (req.method === 'PUT') {
    const { name, email } = req.body
    const updatedUser = await prisma.user.update({
      where: { id: Number(id) },
      data: { name, email }
    })
    res.json(updatedUser)
  }
}

✅ ตอนนี้เราสามารถอัปเดตข้อมูล Users ได้แล้ว

📌 ลบ User (/pages/api/users/[id].js)

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default async function handler(req, res) {
  const { id } = req.query

  if (req.method === 'DELETE') {
    await prisma.user.delete({
      where: { id: Number(id) }
    })
    res.json({ message: 'User deleted' })
  }
}

✅ ตอนนี้เราสามารถลบ Users ได้แล้ว

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

ฟีเจอร์	Prisma	SQL Query ตรง ๆ
ใช้งานง่าย	✅	❌
อ่านโค้ดง่าย	✅	❌
รองรับ TypeScript	✅	❌
มีระบบ Migrations	✅	❌
จัดการ Query Complex ได้ง่าย	✅	❌

📌 ถ้าคุณต้องการ ORM ที่ใช้งานง่ายและรองรับ TypeScript ดี → Prisma คือคำตอบ!

🎯 สรุป

✅ Prisma เป็น ORM ที่ช่วยให้คุณทำงานกับ Database ใน Next.js ได้ง่ายขึ้น
✅ รองรับ PostgreSQL, MySQL, SQLite, MongoDB
✅ ใช้ร่วมกับ Next.js API Routes ได้ดี
✅ ใช้งานง่าย อ่านโค้ดสบายตา

การใช้งาน 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/ ดูเลย แล้วคุณจะติดใจ!