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