การใช้ 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 คือทางเลือกที่ดี!