Aphriell Art: Cara Deploy Next.js + Supabase ke Vercel dari Nol

Kategori: Programming | Perkiraan waktu baca: 10 menit

Waktu pertama kali bangun ARES (platform SaaS manajemen fasilitas yang sekarang saya kembangkan), salah satu keputusan paling penting di awal adalah milih stack yang cepat buat development tapi tetap production-ready. Setelah coba beberapa kombinasi, saya settle di Next.js + Supabase + Vercel — dan sampai sekarang kombinasi ini yang saya pakai untuk hampir semua proyek web/SaaS saya.

Di artikel ini saya mau share cara deploy stack ini dari nol, persis seperti yang saya lakukan waktu mulai ARES.

Kenapa Kombinasi Ini?

Next.js — framework React yang sudah include routing, API routes, dan optimisasi built-in, jadi nggak perlu setup banyak tooling terpisah
Supabase — alternatif open-source Firebase, kasih kita PostgreSQL database, authentication, dan storage tanpa perlu maintain server database sendiri
Vercel — platform deploy yang dibuat khusus untuk Next.js, integrasinya paling smooth dan ada free tier yang cukup generous untuk proyek early-stage

Kombinasi ini cocok banget untuk membangun multi-tenant SaaS kayak ARES, karena Supabase punya fitur Row Level Security yang bikin isolasi data antar-tenant jadi lebih aman tanpa perlu bikin arsitektur database rumit dari nol.

Langkah 1: Setup Project Next.js

npx create-next-app@latest nama-project-kamu
cd nama-project-kamu

Waktu proses setup, kamu akan ditanya beberapa pilihan — untuk proyek modern saya biasanya pilih: TypeScript (ya), ESLint (ya), Tailwind CSS (ya), App Router (ya).

Langkah 2: Buat Project di Supabase

Daftar/login ke supabase.com
Klik New Project, pilih nama, password database, dan region (pilih yang paling dekat dengan target user kamu)
Tunggu beberapa menit sampai project selesai di-provision
Setelah selesai, buka Project Settings > API — catat dua hal ini: Project URL dan anon public key

Langkah 3: Install Supabase Client

npm install @supabase/supabase-js

Buat file .env.local di root project:

NEXT_PUBLIC_SUPABASE_URL=https://xxxxxxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxx

Lalu buat file helper lib/supabase.js:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

Langkah 4: Bikin Tabel Pertama di Supabase

Di dashboard Supabase, buka Table Editor, atau langsung lewat SQL Editor kalau kamu lebih suka nulis query:

create table bookings (
  id uuid default gen_random_uuid() primary key,
  room_name text not null,
  booked_by text not null,
  start_time timestamp not null,
  end_time timestamp not null,
  created_at timestamp default now()
);

Ini contoh sederhana mirip tabel booking yang saya pakai di modul Room Booking-nya ARES.

Langkah 5: Aktifkan Row Level Security (Penting untuk SaaS!)

Kalau kamu bikin aplikasi multi-tenant seperti ARES, ini langkah yang jangan sampai dilewatkan:

alter table bookings enable row level security;

create policy "Users can view their own bookings"
on bookings for select
using (auth.uid()::text = booked_by);

RLS ini yang bikin satu tenant nggak bisa lihat/akses data tenant lain, langsung di level database — jadi keamanannya nggak cuma bergantung pada logic di frontend yang bisa saja ada celah.

Langkah 6: Fetch Data di Next.js

Contoh Server Component (App Router) untuk ambil data booking:

import { supabase } from '@/lib/supabase';

export default async function BookingsPage() {
  const { data: bookings, error } = await supabase
    .from('bookings')
    .select('*')
    .order('start_time', { ascending: true });

  if (error) {
    return <p>Terjadi kesalahan mengambil data.</p>;
  }

  return (
    <div>
      <h1>Daftar Booking Ruangan</h1>
      <ul>
        {bookings.map((booking) => (
          <li key={booking.id}>
            {booking.room_name} — dipesan oleh {booking.booked_by}
          </li>
        ))}
      </ul>
    </div>
  );
}

Langkah 7: Deploy ke Vercel

Ini bagian yang paling gampang dari semuanya:

Push project kamu ke GitHub
Buka vercel.com, login pakai akun GitHub
Klik Add New Project, pilih repository kamu
Di bagian Environment Variables, masukkan NEXT_PUBLIC_SUPABASE_URL dan NEXT_PUBLIC_SUPABASE_ANON_KEY yang sama seperti di .env.local
Klik Deploy

Vercel otomatis detect ini project Next.js dan setting build command yang sesuai. Dalam hitungan menit, project kamu sudah live dengan URL nama-project.vercel.app.

Bonus: Auto-Deploy Setiap Push

Enaknya Vercel, begitu terhubung ke GitHub, setiap kali kamu git push ke branch utama, Vercel otomatis build dan deploy ulang. Kamu juga dapat preview deployment otomatis untuk setiap pull request — ini sangat membantu kalau kamu kerja bareng tim atau mau review perubahan sebelum merge ke production.

Hal yang Saya Pelajari dari Membangun ARES dengan Stack Ini

Row Level Security itu wajib, jangan cuma andalkan filter di kode frontend untuk data sensitif tenant
Environment variables untuk key sensitif (service role key Supabase) jangan pernah pakai prefix NEXT_PUBLIC_ — itu bikin key-nya ke-expose ke browser
Vercel free tier cukup generous untuk MVP dan early-stage, tapi cek limit bandwidth/function execution kalau trafik mulai naik
Migrasi database sebaiknya di-track dengan rapi (Supabase support migration files) supaya perubahan schema nggak berantakan waktu proyek makin besar

Penutup

Stack Next.js + Supabase + Vercel ini jadi tulang punggung ARES sampai sekarang, dan saya juga pakai untuk beberapa proyek freelance lain karena kecepatan development-nya susah ditandingi untuk skala startup/SaaS kecil-menengah.

Kalau kamu lagi mau bangun produk SaaS, dashboard internal, atau aplikasi web dengan stack modern seperti ini, saya buka jasa untuk itu. Cek portofolio saya di april-portfolio-pearl.vercel.app, termasuk studi kasus lengkap ARES, atau hubungi lewat halaman Contact.

Ada bagian yang kurang jelas atau mau ditanyakan lebih lanjut? Tulis di komentar ya.

Cara Deploy Next.js + Supabase ke Vercel dari Nol