การใช้ Supabase กับ Next.js

ทำไมต้อง Supabase?

ถ้าพูดถึงการทำแอปเว็บที่ต้องมีฐานข้อมูล การสมัครสมาชิก หรือ API แบบง่าย ๆ แต่ทรงพลัง Supabase นี่แหละคือของดีที่ควรลอง เพราะมันให้บริการ Backend-as-a-Service (BaaS) ที่ทำงานคล้าย Firebase แต่ใช้ PostgreSQL เป็นฐานข้อมูลหลัก ซึ่งหมายความว่าได้ทั้ง SQL แท้ ๆ และพลังของ Firebase มารวมกัน!

จุดเด่นของ Supabase:

• ฐานข้อมูล PostgreSQL แบบ Managed (ไม่ต้องตั้งค่าจุกจิก)
• Authentication ที่รองรับ OAuth, Email/Password และ Magic Links
• Realtime Database สามารถ Subscriptions เหมือน Firebase
• Storage สำหรับเก็บไฟล์ เช่น รูปหรือวิดีโอ
• Edge Functions สำหรับสร้าง API แบบ Serverless
• ใช้งานฟรีในระดับเริ่มต้น!

ทำไม Next.js ถึงเป็นตัวเลือกที่ดี?

ถ้า Supabase เป็นขุมพลังฝั่ง Backend งั้นฝั่ง Frontend ที่มาเข้าคู่กันได้ดีสุดก็คือ Next.js นี่แหละ ด้วยความสามารถแบบ Full-Stack ที่ให้เราสร้าง API Routes, Server-side Rendering (SSR), Static Site Generation (SSG) และ Client-side Rendering (CSR) ได้ในโปรเจกต์เดียวกัน ทำให้สามารถใช้ Supabase ได้เต็มประสิทธิภาพสุด ๆ

มาเริ่มใช้ Supabase กับ Next.js กันเถอะ!

1. สร้างโปรเจกต์ Next.js

เริ่มจากการสร้างโปรเจกต์ Next.js กันก่อน ใช้คำสั่งนี้ใน Terminal:

npx create-next-app@latest my-supabase-app
cd my-supabase-app
npm install

2. ติดตั้ง Supabase SDK

เมื่อมีโปรเจกต์ Next.js แล้ว เราต้องเพิ่ม Supabase SDK เข้าไป:

npm install @supabase/supabase-js

3. ตั้งค่า Supabase Client

Supabase ต้องการ API URL และ Anon Key ซึ่งเราจะได้มาจาก supabase.com หลังจากสมัครและสร้างโปรเจกต์ใหม่

ให้สร้างไฟล์ .env.local แล้วใส่ค่าแบบนี้:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

จากนั้นสร้าง utils/supabaseClient.js เพื่อเชื่อมต่อ Supabase:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

4. การสมัครสมาชิกและล็อกอินด้วย Supabase Auth

ใน Next.js เราสามารถใช้ Supabase Auth เพื่อให้ผู้ใช้ สมัครสมาชิก, ล็อกอิน และออกจากระบบ ได้ง่าย ๆ

สมัครสมาชิก

import { supabase } from '../utils/supabaseClient';

async function signUp(email, password) {
  const { user, error } = await supabase.auth.signUp({ email, password });
  if (error) {
    console.error(error.message);
  } else {
    console.log('User signed up:', user);
  }
}

ล็อกอิน

async function signIn(email, password) {
  const { user, error } = await supabase.auth.signInWithPassword({ email, password });
  if (error) {
    console.error(error.message);
  } else {
    console.log('User signed in:', user);
  }
}

ออกจากระบบ

async function signOut() {
  const { error } = await supabase.auth.signOut();
  if (error) {
    console.error(error.message);
  } else {
    console.log('User signed out');
  }
}

5. การใช้ Realtime Database

หนึ่งในจุดแข็งของ Supabase คือ Realtime Database ซึ่งช่วยให้เราติดตามการเปลี่ยนแปลงของข้อมูลได้ทันที

ตัวอย่างการ Subscriptions ตาราง messages:

import { useEffect, useState } from 'react';
import { supabase } from '../utils/supabaseClient';

export default function Chat() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const subscription = supabase
      .channel('messages')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'messages' }, (payload) => {
        setMessages((prevMessages) => [...prevMessages, payload.new]);
      })
      .subscribe();
    return () => {
      supabase.removeChannel(subscription);
    };
  }, []);

  return (
    <div>
      {messages.map((msg, index) => (
        <p key={index}>{msg.content}</p>
      ))}
    </div>
  );
}

6. การใช้ Supabase Storage

ถ้าอยากอัปโหลดไฟล์ภาพไปเก็บไว้บน Supabase ก็ทำได้ง่าย ๆ

async function uploadFile(file) {
  const { data, error } = await supabase.storage.from('avatars').upload(`public/${file.name}`, file);
  if (error) {
    console.error('Upload error:', error.message);
  } else {
    console.log('Uploaded file:', data);
  }
}

7. การสร้าง API ด้วย Supabase Edge Functions

ถ้าต้องการ API แบบ Serverless ก็สามารถใช้ Edge Functions ของ Supabase ได้ โดยเขียนฟังก์ชันใน TypeScript และ Deploy ไปยัง Supabase

import { serve } from 'std/server';
export default serve(async (req) => {
  return new Response('Hello from Supabase Edge Function!');
});

สรุป

Supabase เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการทำ Full-Stack Development กับ Next.js เพราะมันให้เราสร้างแอปพลิเคชันที่มี Authentication, Database, Storage และ Realtime ได้ง่ายมาก ๆ ถ้าคุณกำลังหา Backend ที่ใช้ง่าย แต่ทรงพลัง บอกเลยว่า Supabase คือทางเลือกที่ดี!

ใช้ 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