ทำไมต้อง 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 คือทางเลือกที่ดี!
