JSTAcademy
0 XP
Dashboard
Crash Courses
Supabase Setup & Client
10 min
Basic+150 XP
Crash Courses · Basic

Supabase Setup & Client

Initialize Supabase in a Next.js project with typed client and environment config.
10 min read+150 XP on completionCert: Supabase Crash Course
Tap any word in the text below to start reading from there.

Supabase Setup & Client

Supabase wraps PostgreSQL with a REST API, Auth, Storage, and Realtime. The @supabase/ssr package provides session-aware clients for Next.js.

Install

npm install @supabase/supabase-js @supabase/ssr

Environment Variables

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...  # server-only

Generate Types

npx supabase gen types typescript --project-id <your-project-id> > src/lib/database.types.ts

Browser Client

// lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr'
import type { Database } from '@/lib/database.types'

export function createClient() {
  return createBrowserClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

Server Client (Server Components & Route Handlers)

// lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
import type { Database } from '@/lib/database.types'

export async function createClient() {
  const cookieStore = await cookies()

  return createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() { return cookieStore.getAll() },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options))
        },
      },
    }
  )
}
0%