Fusion Studio
Next.js (App Router, TypeScript) + Supabase + Vercel.
Stack
- Framework: Next.js 15 (App Router) + TypeScript + Tailwind CSS
- Database / Auth: Supabase (
@supabase/ssr)
- Hosting: Vercel
- Package manager: npm
Environments
| Environment | Git branch | Vercel target | Supabase project |
|---|
| Local dev | any | — | fusion-studio-staging (or local Supabase) |
| Staging | staging | Preview | fusion-studio-staging |
| Production | main | Production | fusion-studio-prod |
Two separate Supabase projects keep staging data fully isolated from
production. The same SQL migrations are applied to both to keep schemas identical.
Local development
- Copy env template and fill in your staging Supabase keys:
cp .env.example .env.local
# then edit .env.local
- Run the dev server:
npm run dev
App runs at http://localhost:3000
Env vars
| Variable | Where | Notes |
|---|
NEXT_PUBLIC_SUPABASE_URL | client + server | Project URL |
NEXT_PUBLIC_SUPABASE_ANON_KEY | client + server | Public anon key |
SUPABASE_SERVICE_ROLE_KEY | server only | Never expose to the browser |
NEXT_PUBLIC_SITE_URL | client + server | Base URL for redirects |
Supabase client usage
- Client Components:
import { createClient } from "@/lib/supabase/client"
- Server Components / Route Handlers / Server Actions:
import { createClient } from "@/lib/supabase/server"
- Session refresh is handled by
src/proxy.ts (this Next.js version renamed the middleware convention to proxy).
Database migrations
supabase migration new <name> # create a migration
supabase db reset # rebuild LOCAL db from migrations
supabase link --project-ref <ref> # link a remote project
supabase db push # apply migrations to the linked remote project
Apply the same migrations to staging first, then production.
Deployment (Vercel)
- Pushing to
staging → Vercel Preview deploy (uses staging Supabase env vars).
- Pushing to
main → Vercel Production deploy (uses production Supabase env vars).
- Set env vars per-environment in the Vercel dashboard (Project → Settings → Environment Variables).
