supabase

Supabase Development

Overview

Supabase is an open-source Firebase alternative providing PostgreSQL database, authentication, instant APIs, real-time subscriptions, storage, and edge functions.

Client Setup

JavaScript/TypeScript

// src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js';
import type { Database } from '@/types/supabase';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey);

// For server-side with secret key (admin access, bypasses RLS)
// Find in: Supabase Dashboard → Settings → API → Secret keys
export const supabaseAdmin = createClient<Database>(
  supabaseUrl,
  process.env.SUPABASE_SECRET_KEY!,
  {
    auth: { persistSession: false },
    global: {
      // CRITICAL for Next.js 14: Bypass fetch cache to prevent stale data.
      // Next.js patches global fetch with cache: 'force-cache' by default.
      fetch: (input, init) =>
        fetch(input, { ...init, cache: 'no-store' }),
    },
  }
);

Generate Types

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > types/supabase.ts

Database Queries

Basic CRUD

// Select
const { data, error } = await supabase
  .from('users')
  .select('id, email, name')
  .eq('is_archived', false);

// Select with relations
const { data, error } = await supabase
  .from('posts')
  .select(`
    id,
    title,
    content,
    author:users(id, name, email)
  `)
  .eq('published', true);

// Insert
const { data, error } = await supabase
  .from('users')
  .insert({ email: '[email protected]', name: 'John' })
  .select()
  .single();

// Update
const { data, error } = await supabase
  .from('users')
  .update({ name: 'Jane' })
  .eq('id', userId)
  .select()
  .single();

// Archive (not delete!)
const { error } = await supabase
  .from('users')
  .update({ is_archived: true, archived_at: new Date().toISOString() })
  .eq('id', userId);

// Actual delete (use sparingly)
const { error } = await supabase
  .from('users')
  .delete()
  .eq('id', userId);