How to Set Up Supabase + Vercel for a Next.js App (Step by Step)
The most common setup question for indie hackers in 2026. From zero to a deployed Next.js app with a Postgres database and working auth — without touching a server.
Supabase and Vercel are individually excellent. Together, they're the fastest path to a production-ready Next.js application with a real database and auth. This guide covers the complete setup — from creating accounts to your first deployed app.
1. Create your Supabase project
- Go to supabase.com and sign in with GitHub.
- Click "New project". Choose a region close to your users (EU West for Europe, US East for North America).
- Set a strong database password and save it — you'll need it if you ever connect directly to Postgres.
- Wait ~2 minutes for provisioning.
2. Get your Supabase credentials
Go to Project Settings → API. You need three values:
- Project URL — Looks like https://xxxxx.supabase.co
- anon (public) key — Safe to use in the browser. Respects Row Level Security.
- service_role (secret) key — Server-side only. Never expose this in client code. Use for admin operations that bypass RLS.
3. Create your Next.js project
Terminal
npx create-next-app@latest my-app --typescript --app --tailwind cd my-app npm install @supabase/supabase-js
4. Configure environment variables
Create a .env.local file in your project root:
.env.local
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key SUPABASE_SERVICE_KEY=your-service-role-key
Never commit .env.local
Make sure .env.local is in your .gitignore (it is by default in create-next-app). You'll set these as environment variables in Vercel separately.
5. Create Supabase client utilities
lib/supabase.ts (browser client)
import { createClient } from '@supabase/supabase-js'
export const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)6. Deploy to Vercel
- Push your project to a GitHub repository.
- Go to vercel.com/new and import the repository.
- Vercel auto-detects Next.js — no build configuration needed.
- Click Deploy. Your app is live in ~60 seconds.
Preview deployments
Every time you push a branch to GitHub, Vercel creates a unique preview URL for that branch. This is invaluable for testing features before merging to main.
7. Enable Supabase Auth (optional but recommended)
Next steps
- Set up Row Level Security (RLS) policies on your tables before launching.
- Add Resend for transactional email — the API is three lines of code.
RLS is critical
Without Row Level Security, any user with your anon key can read all data in your database. Enable RLS on every table and write policies that restrict access to the authenticated user's own data. Supabase has excellent documentation on this.
Ready to decide?
Use the Indie SaaS Stack Screener to filter by your criteria and compare options head-to-head.