Nextbase: Next.js + Supabase
ทางเลือกของ PERN Stack · ใช้ต่อใน Going further ของ Day 3
Nextbase คือการทำเว็บ full-stack ด้วย 2 ตัว: Next.js ทำทั้งหน้าเว็บและฝั่งเซิร์ฟเวอร์ ส่วน Supabase ให้ฐานข้อมูล ระบบล็อกอิน และ API มาพร้อม ไม่ต้องเขียน Express เอง
At a glance
How it works
เบราว์เซอร์ ──▶ Next.js (Server Component / Server Action) ──supabase-js──▶ Supabase (PostgreSQL)
◀── HTML ── ◀────── rows ──────- Server Component ใน Next.js ดึงข้อมูลจาก Supabase ก่อนส่งหน้าให้ผู้ใช้
- Server Action ใน Next.js รับฟอร์มแล้วเขียนข้อมูลลง Supabase
- Row Level Security (RLS) ใน Supabase คุมว่าใครอ่านหรือเขียนแถวไหนได้
Project structure
shop/
├── app/
│ ├── page.tsx ← แสดงสินค้า (อ่านจาก Supabase)
│ └── actions.ts ← Server Action สั่งซื้อ (เขียนลง Supabase)
├── lib/
│ └── supabase.ts ← สร้าง client
└── .env.local ← URL และ key ของ Supabaseเลือก PERN หรือ Nextbase
| อยาก… | ใช้ |
|---|---|
| เข้าใจว่า API และฐานข้อมูลทำงานอย่างไรทุกชั้น | PERN Stack |
| ทำ MVP หรือ hackathon ให้เสร็จเร็ว | Nextbase |
| มีระบบล็อกอินโดยไม่ต้องเขียนเอง | Nextbase |
| แยกทีม frontend กับ backend ชัดเจน | PERN Stack |
ฝึกต่อ
เว็บสำหรับลงมือทำ
เอกสาร · supabase.comSupabase + Next.js Quickstart เริ่มโปรเจกต์ด้วยเทมเพลตทางการเอกสาร · nextjs.orgNext.js: Fetching data ดึงข้อมูลใน Server Component
วิดีโอเรียนเอง
Next steps
- Supabase: ต่อ Supabase เข้ากับ Next.js
CS ChallengeLast updated Oct 2026