Skip to content

Navigation Menu

Sign in
Appearance settings
Sign up
Appearance settings
Open more actions menu

Repository files navigation

Supabase Nextjs Tutorial

นี่คือตัวอย่างการใช้งาน Supabase และ Next.js ในการสร้างเว็บไซต์ที่มีการรับส่งข้อมูลแบบ Realtime

ความต้องการ

  • Node.js - Javasrcipt รันไทม์ (version 14 ขึ้นไป)
  • pnpm - Package Manager สำหรับ Node.js (version 6 ขึ้นไป)
  • Git - Version Control System
  • Visual Studio Code - Code Editor

Technologies

  • Supabase - บริการ Database แบบ Open Source และ Realtime
  • Next.js - Framework สำหรับการพัฒนาเว็บไซต์แบบ SSR และ SSG ของ React

วิธีการใช้งาน

  1. โคลน Repository นี้
  2. สร้างไฟล์ .env.local และใส่ค่าตาม .env.example
  3. รันคำสั่ง pnpm install เพื่อติดตั้ง dependencies
  4. รันคำสั่ง pnpm dev เพื่อรันโปรเจค
  5. เปิดเว็บไซต์ที่ http://localhost:3000

วิธีการใช้งาน Supabase

  1. สร้าง Project ใน Supabase
  2. สร้าง Table ใน Supabase
    1. employees
      • id (type: uuid, primary key)
      • name (type: text)
      • position (type: text)
      • salary (type: int8)
      • gender (type: text)
      • created_at (type: timestamp, default: now())
    2. teams
      • id (type: uuid, primary key)
      • name (type: text)
      • created_at (type: timestamp, default: now())
    3. projects
      • id (type: uuid, primary key)
      • name (type: text)
      • level (type: int2)
      • team_id (type: uuid, foreign key: teams.id)
      • created_at (type: timestamp, default: now())
  3. สร้างความสัมพันธ์ many to many
    1. employees กับ teams
      create table members (
        "team_id" uuid references teams,
        "employee_id" uuid references employees,
        primary key (team_id,employee_id)
      );

Video

About

supabase + nextjs server action

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.