แสดงบทความที่มีป้ายกำกับ Connection Pooling แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ Connection Pooling แสดงบทความทั้งหมด

วันพฤหัสบดีที่ 6 มีนาคม พ.ศ. 2568

การเชื่อมต่อ PostgreSQL กับ Next.js: ทำเว็บให้มี Database กันเถอะ!

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

PostgreSQL (หรือที่เรียกสั้น ๆ ว่า Postgres) เป็นฐานข้อมูลเชิงสัมพันธ์ (Relational Database) ที่ เร็ว, เสถียร, และรองรับข้อมูลขนาดใหญ่ ได้ดี มีฟีเจอร์เด็ด ๆ อย่าง JSONB, Indexing, Full-text search และอื่น ๆ อีกเพียบ! 💾

ในบทความนี้ เราจะมาดูกันว่า จะเชื่อมต่อ PostgreSQL กับ Next.js ยังไง ใช้ Prisma, pg, หรือ Drizzle อันไหนเหมาะกับงานแบบไหน และทำยังไงให้โค้ดอ่านง่ายและดูแลต่อได้ง่าย

🎯 PostgreSQL + Next.js ใช้ทำอะไรได้บ้าง?

ถ้าคุณสร้างเว็บที่ต้องการ บันทึกและดึงข้อมูล จากฐานข้อมูล เช่น

✅ เว็บบล็อก → บันทึกและเรียกดูบทความ
✅ เว็บร้านค้า → จัดเก็บสินค้าและคำสั่งซื้อ
✅ ระบบล็อกอิน → เก็บข้อมูลผู้ใช้และการยืนยันตัวตน
✅ เว็บแอปที่ต้องใช้ข้อมูลจริง → เช่น Dashboard, CRM, หรือระบบจอง

การใช้ PostgreSQL เป็นทางเลือกที่ดี เพราะมันรองรับ โครงสร้างข้อมูลที่ซับซ้อน และ ขยายขนาดได้ง่าย 🚀

🛠 วิธีเชื่อมต่อ PostgreSQL กับ Next.js

การเชื่อมต่อ PostgreSQL กับ Next.js ทำได้หลายวิธี เช่น

วิธี ใช้เมื่อ ตัวอย่างเครื่องมือ
ใช้ Prisma ต้องการ ORM ที่ใช้งานง่ายและโค้ดอ่านสวย Prisma
ใช้ pg (node-postgres) ต้องการทำงานกับ SQL โดยตรง pg (node-postgres)
ใช้ Drizzle ORM ต้องการ ORM ที่เบาและเร็ว Drizzle
ใช้ Direct SQL (raw queries) ต้องการประสิทธิภาพสูงสุด SQL Queries ตรง ๆ

🔹 1. เชื่อมต่อ PostgreSQL ด้วย Prisma (ง่ายสุด!)

Prisma เป็น ORM ที่ได้รับความนิยมมาก เพราะมันช่วยให้เราสามารถเขียนโค้ด TypeScript ที่อ่านง่าย และลดปัญหาการจัดการฐานข้อมูล

🏗 ติดตั้ง Prisma และ PostgreSQL Client

npm install @prisma/client @prisma/cli pg

📝 ตั้งค่า .env ให้เชื่อมต่อ PostgreSQL

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

🛠 ตั้งค่า Prisma Schema

สร้างไฟล์ 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

npx prisma migrate dev --name init

📌 ใช้ Prisma ใน API Routes (/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)
  } else if (req.method === 'POST') {
    const { name, email } = req.body
    const newUser = await prisma.user.create({
      data: { name, email }
    })
    res.json(newUser)
  }
}

✅ ทำไมต้องใช้ Prisma?

✔ ใช้ง่ายและอ่านง่าย
✔ มี Type Safety (ใช้กับ TypeScript ได้ดี)
✔ จัดการ Database Migrations ได้สะดวก

🔹 2. เชื่อมต่อ PostgreSQL ด้วย pg (ทำงานกับ SQL ตรง ๆ)

ถ้าคุณต้องการ เขียน SQL เองโดยตรง และต้องการความยืดหยุ่นสูง pg (node-postgres) เป็นตัวเลือกที่ดี

🏗 ติดตั้ง pg

npm install pg

📝 เชื่อมต่อ PostgreSQL (lib/db.js)

import { Pool } from 'pg'

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
})

export async function query(text, params) {
  const res = await pool.query(text, params)
  return res.rows
}

📌 ใช้ pg ใน API Routes (/pages/api/users.js)

import { query } from '../../lib/db'

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const users = await query('SELECT * FROM users', [])
    res.json(users)
  } else if (req.method === 'POST') {
    const { name, email } = req.body
    const newUser = await query(
      'INSERT INTO users (name, email) VALUES ($1, $2) RETURNING *',
      [name, email]
    )
    res.json(newUser)
  }
}

✅ ทำไมต้องใช้ pg?

✔ ควบคุม SQL Query ได้เต็มที่
✔ เบาและเร็วกว่า ORM
✔ รองรับ Transactions และ Connection Pooling


🔹 3. ใช้ Drizzle ORM (ทางเลือกใหม่ เบาและเร็ว!)

ถ้าคุณต้องการ ORM ที่ เบาและเร็วกว่า Prisma Drizzle ORM เป็นตัวเลือกที่น่าสนใจ

🏗 ติดตั้ง Drizzle ORM

npm install drizzle-orm pg

📝 สร้าง Connection (lib/db.ts)

import { drizzle } from 'drizzle-orm/node-postgres'
import { Pool } from 'pg'

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
})

export const db = drizzle(pool)

📌 ใช้ Drizzle ใน API Routes (/pages/api/users.ts)

import { db } from '../../lib/db'

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const users = await db.select().from('users')
    res.json(users)
  }
}

✅ ทำไมต้องใช้ Drizzle?

✔ เร็วกว่า Prisma
✔ ใช้ TypeScript ได้ดี
✔ อ่านง่ายและไม่ต้องใช้ Migrations ใหญ่ ๆ

🎯 สรุป

วิธี ใช้เมื่อ เครื่องมือที่ใช้
Prisma ต้องการ ORM ที่ใช้งานง่าย Prisma
pg (node-postgres) ต้องการเขียน SQL เอง pg
Drizzle ORM ต้องการ ORM ที่เบาและเร็ว Drizzle


🔹 ถ้าคุณ ชอบ ORM และอยากให้โค้ดดูสวย ๆ → ใช้ Prisma
🔹 ถ้าคุณ ต้องการความเร็วและควบคุม SQL เอง → ใช้ pg
🔹 ถ้าคุณ อยากได้ ORM ที่เบาและเร็วกว่า Prisma → ใช้ Drizzle

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

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