วิธีสร้าง 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 ของคุณ, คุณสามารถจัดการข้อมูลต่างๆ เช่น การดึงข้อมูล, การเพิ่มข้อมูล, การอัปเดตข้อมูล, และการลบข้อมูลได้อย่างมีประสิทธิภาพ