/Projects
Let’s talk
Supabase
ProjectsCS ChallengeFull-StackSupabase

Supabase: ฐานข้อมูลและหลังบ้านสำเร็จรูป

ส่วนหนึ่งของ Nextbase · ใน PERN ใช้เป็นที่ฝาก PostgreSQL

Supabase เปิด PostgreSQL ให้บนคลาวด์ พร้อมระบบล็อกอิน เก็บไฟล์ และ API อัตโนมัติ เรียกใช้จาก Next.js ผ่าน supabase-js ได้เลยโดยไม่ต้องเขียนเซิร์ฟเวอร์เอง

At a glance

ฟีเจอร์ทำอะไร
DatabasePostgreSQL ตัวจริง มี Table Editor และ SQL Editor
Authล็อกอินด้วยอีเมล, Google, GitHub
Storageเก็บรูปและไฟล์
Realtimeข้อมูลเปลี่ยนแล้วหน้าเว็บอัปเดตเอง
ราคามีแผน Free พอสำหรับโปรเจกต์เรียน

Installation

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

    ไปที่ supabase.com/dashboard กด New project เลือก Region Southeast Asia (Singapore)

  2. สร้างตาราง

    เปิด SQL Editor แล้วรันคำสั่งสร้างตารางจาก PostgreSQL › Structure

  3. เปิดสิทธิ์ด้วย RLS

    ให้ทุกคนอ่านสินค้าได้ และสร้างออเดอร์ได้ (ตัวอย่างสำหรับเรียน)

    alter table products enable row level security;
alter table orders enable row level security;

grant select on public.products to anon;
grant insert on public.orders to anon;

create policy "public can read products"
on public.products for select to anon using (true);

create policy "public can create orders"
on public.orders for insert to anon with check (true);

  4. ติดตั้งใน Next.js

    npm install @supabase/supabase-js

  5. ใส่ key ใน .env.local

    ดูค่าได้ที่ Connect หรือ Project Settings → API Keys ใช้ publishable key เท่านั้น ห้ามใช้ secret key ในหน้าเว็บ

    NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_xxxx

สร้าง client

// lib/supabase.ts
import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
);

อ่านข้อมูล

// app/page.tsx (Server Component)
import { supabase } from "@/lib/supabase";

export default async function Home() {
  const { data: products, error } = await supabase
    .from("products")
    .select("id, name, price")
    .order("id");

  if (error) return <p>โหลดไม่สำเร็จ: {error.message}</p>;
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name} · {p.price} บาท</li>
      ))}
    </ul>
  );
}

เขียนข้อมูลด้วย Server Action

// app/actions.ts
"use server";
import { supabase } from "@/lib/supabase";

export async function createOrder(formData: FormData) {
  const { error } = await supabase
    .from("orders")
    .insert({ customer_name: formData.get("name") as string });
  if (error) throw new Error(error.message);
}
// ใช้ในหน้าไหนก็ได้
import { createOrder } from "./actions";

<form action={createOrder}>
  <input name="name" placeholder="ชื่อของคุณ" required />
  <button>สั่งซื้อ</button>
</form>
supabase-jsเทียบกับ SQL
.from("products").select("*")select * from products
.eq("id", 1)where id = 1
.order("price")order by price
.insert({ … })insert into … values …
.update({ … }).eq("id", 1)update … set … where id = 1
.delete().eq("id", 1)delete from … where id = 1

ต่อยอดอยากได้ระบบล็อกอินด้วย เริ่มจากเทมเพลต npx create-next-app@latest my-app -e with-supabase ที่ตั้งค่า Auth ไว้ให้แล้ว

ฝึกต่อ

เว็บสำหรับลงมือทำ

เอกสาร · supabase.comSupabase + Next.js Quickstart เอกสารทางการเอกสาร · supabase.comsupabase-js reference ทุกคำสั่งพร้อมตัวอย่างเอกสาร · supabase.comRow Level Security คุมสิทธิ์การอ่านเขียน

วิดีโอเรียนเอง

วิดีโอ · youtube.comSupabase in 100 Seconds Fireshipวิดีโอ · youtube.comค้นคลิปภาษาไทย: Supabase

Next steps

  • Vercel: deploy แล้วใส่ env ของ Supabase
  • Challenge Day 3: ลองทำร้านค้าแบบ Nextbase ใน Going further
CS ChallengeLast updated Oct 2026