NextJS: TypeScript

วันศุกร์ที่ 7 มีนาคม พ.ศ. 2568

ใช้ 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 ได้ดี
✅ ใช้งานง่าย อ่านโค้ดสบายตา

NextJS