Deploy to Vercel

Step-by-step guide to deploy your app on Vercel with Supabase and environment setup.

Overview

Vercel is the recommended way to deploy your marketplace app built with Next.js and tRPC. It integrates seamlessly with Supabase and GitHub for CI/CD.

Prerequisites

GitHub repository (public or private)
Supabase project already set up
Vercel account

1. Push Code to GitHub

Make sure your full project is pushed to a GitHub repository:

git init
git remote add origin https://github.com/YOUR_USERNAME/your-repo.git
git push -u origin main

2. Connect to Vercel

Visit vercel.com
Click "Add New Project"
Import your GitHub repo
Choose the framework: Next.js

3. Configure Environment Variables

Add the same variables from .env.local to the Vercel dashboard:

DATABASE_URL=...
DIRECT_URL=...
NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...
STRIPE_SECRET_KEY=...
STRIPE_WEBHOOK_SECRET=...

4. Set Prisma Settings

In package.json, ensure you use:

"prisma": {
  "schema": "prisma/schema.prisma"
}

Ensure prisma generate runs during the build process.

5. Production Database Access

In Vercel:

Use DATABASE_URL for read/write queries
Use DIRECT_URL only locally (e.g., for migrations)

6. Set Build Command

Vercel auto-detects Next.js. If needed, set manually:

yarn build

Output directory: .next

7. Deploy

Click "Deploy" on Vercel. The app should be live within minutes!

Notes

Ensure Supabase policies allow access as expected
Add a webhook endpoint in Stripe to your deployed domain
Use Vercel’s environment separation for staging vs production