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

การเชื่อมต่อ 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