Skip to main content
Vercel is the recommended platform for deploying your Next.js SaaS Starter. This guide will walk you through the complete deployment process.

​
Prerequisites

Before you begin, ensure you have:

​
Deployment Steps

1

Push Code to Git Repository

If you haven’t already, push your code to a Git repository:
git add .
git commit -m "Initial commit"
git push origin main
2

Connect Repository to Vercel

  1. Go to vercel.com and sign in
  2. Click Add New → Project
  3. Import your Git repository
  4. Vercel will automatically detect Next.js and configure build settings
Vercel automatically detects the following:
  • Framework: Next.js
  • Build Command: pnpm build
  • Output Directory: .next
  • Install Command: pnpm install
3

Configure Environment Variables

Before deploying, add all required environment variables in the Vercel dashboard:
  1. Click Environment Variables in the project settings
  2. Add each variable:
VariableValueNotes
BASE_URLhttps://your-domain.vercel.appYour production domain
POSTGRES_URLpostgresql://...Production database connection string
STRIPE_SECRET_KEYsk_live_...Production Stripe secret key
STRIPE_WEBHOOK_SECRETwhsec_...Leave empty for now, add after webhook creation
AUTH_SECRETGenerated stringRun openssl rand -base64 32 to generate
Use production Stripe keys (sk_live_...), not test keys (sk_test_...). Find your production keys at dashboard.stripe.com/apikeys.
4

Deploy

Click Deploy to start your first deployment.Vercel will:
  1. Clone your repository
  2. Install dependencies with pnpm install
  3. Build your application with pnpm build
  4. Deploy to their global edge network
The initial deployment typically takes 1-2 minutes.
5

Run Database Migrations

After your first deployment, you need to run database migrations.Option A: Using Vercel CLI (Recommended)
# Install Vercel CLI
npm i -g vercel

# Login to Vercel
vercel login

# Link your project
vercel link

# Run migrations
vercel env pull .env.production
pnpm db:migrate
Option B: Manually with psqlConnect to your database and run the SQL migrations from lib/db/migrations/.
6

Create Stripe Production Webhook

Now that your app is deployed, create a production webhook:
  1. Go to dashboard.stripe.com/webhooks
  2. Click Add endpoint
  3. Set endpoint URL: https://your-domain.vercel.app/api/stripe/webhook
  4. Select events to listen for:
    • customer.subscription.updated
    • customer.subscription.deleted
  5. Click Add endpoint
  6. Copy the Signing secret (starts with whsec_...)
The webhook handler verifies signatures and processes subscription changes in app/api/stripe/webhook/route.ts.
7

Add Webhook Secret to Vercel

  1. Go back to your Vercel project settings
  2. Navigate to Environment Variables
  3. Add or update STRIPE_WEBHOOK_SECRET with the signing secret from step 5
  4. Redeploy your application for the change to take effect
You can trigger a redeploy by going to Deployments → … menu on latest deployment → Redeploy.

​
Database Options

You need a production PostgreSQL database. Here are recommended options: Pros: Native Vercel integration, automatic connection pooling, serverless-optimized
  1. Go to your Vercel project
  2. Click Storage tab
  3. Click Create Database → Postgres
  4. Follow the setup wizard
  5. Vercel automatically adds POSTGRES_URL to your environment variables

​
Neon

Pros: Serverless, automatic scaling, generous free tier
  1. Sign up at neon.tech
  2. Create a new project
  3. Copy the connection string
  4. Add to Vercel as POSTGRES_URL

​
Supabase

Pros: Includes auth and storage, good free tier
  1. Sign up at supabase.com
  2. Create a new project
  3. Get connection string from project settings
  4. Add to Vercel as POSTGRES_URL
More database options available at vercel.com/marketplace?category=databases.

​
Custom Domain Configuration

To use a custom domain instead of .vercel.app:
1

Add Domain to Vercel

  1. Go to project Settings → Domains
  2. Enter your domain name
  3. Click Add
2

Configure DNS

Vercel will provide DNS configuration instructions:
  • CNAME Record: Point to cname.vercel-dns.com
  • A Record: Point to Vercel’s IP addresses
Add these records to your domain registrar’s DNS settings.
3

Update Environment Variables

Update BASE_URL in your environment variables:
BASE_URL=https://yourdomain.com
Redeploy for changes to take effect.
4

Update Stripe Webhook

Update your Stripe webhook endpoint URL to use the custom domain:
  1. Go to dashboard.stripe.com/webhooks
  2. Edit your webhook endpoint
  3. Update URL to https://yourdomain.com/api/stripe/webhook
Vercel automatically provisions SSL certificates for all domains. HTTPS is enabled by default.

​
Automatic Deployments

Vercel automatically deploys your application when you push to your repository:
  • Production Branch (usually main): Deploys to production domain
  • Other Branches: Creates preview deployments with unique URLs
  • Pull Requests: Generates preview deployments for testing

​
Preview Deployments

Every pull request gets a unique preview URL: 
https://your-app-git-feature-branch-username.vercel.app
Preview deployments use production environment variables. Be careful when testing payments or database operations.

​
Monitoring and Logs

​
View Deployment Logs

  1. Go to your project dashboard
  2. Click Deployments
  3. Click on any deployment
  4. View build logs and runtime logs

​
Runtime Logs

View real-time application logs: 
# Using Vercel CLI
vercel logs

# Follow logs in real-time
vercel logs --follow

​
Error Tracking

For production error tracking, consider integrating:

​
Troubleshooting

​
Build Failures

Issue: Build fails with TypeScript errors 
# Run build locally to debug
pnpm build
Fix any TypeScript errors before pushing.

​
Environment Variable Issues

Issue: Application crashes due to missing environment variables
  1. Verify all five required variables are set in Vercel
  2. Check for typos in variable names
  3. Redeploy after adding variables

​
Database Connection Errors

Issue: Cannot connect to database
  • Verify POSTGRES_URL format: postgresql://user:password@host:port/database
  • Ensure database allows connections from Vercel IPs
  • Check if connection pooling is required

​
Webhook Signature Verification Failed

Issue: Stripe webhook returns 400 errors
  • Verify STRIPE_WEBHOOK_SECRET matches the webhook signing secret in Stripe Dashboard
  • Ensure you’re using the production webhook secret, not test
  • Check that webhook URL exactly matches: https://yourdomain.com/api/stripe/webhook

​
Next Steps

Production Checklist

Review production environment setup and security considerations

Build docs developers (and LLMs) love

Get started for freeTalk to us