Skip to main content

Vercel Deployment

Deploy your AutoDeployBase project to Vercel with zero configuration.

Quick Deploy​

Using Vercel CLI​

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

That's it! Vercel auto-detects your framework and configures the build.

Using Git Integration​

  1. Push your project to GitHub, GitLab, or Bitbucket
  2. Import the repository in Vercel Dashboard
  3. Vercel automatically deploys on every push

Environment Variables​

Set environment variables in the Vercel dashboard or CLI:

Dashboard​

  1. Go to Project Settings → Environment Variables
  2. Add each variable for Production, Preview, and Development

CLI​

# Add a secret
vercel env add DATABASE_URL

# Pull to local .env
vercel env pull

Required Variables​

# Database
DATABASE_URL="postgresql://..."

# Authentication
JWT_SECRET="your-secure-secret"

# App URL
NEXT_PUBLIC_APP_URL="https://your-app.vercel.app"

Plugin Variables​

# Stripe
STRIPE_SECRET_KEY="sk_live_..."
STRIPE_PUBLISHABLE_KEY="pk_live_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

# Email
RESEND_API_KEY="re_..."

# Storage
S3_ACCESS_KEY="..."
S3_SECRET_KEY="..."

Database Configuration​

Vercel Postgres​

Use Vercel's managed PostgreSQL:

# Create database in dashboard or CLI
vercel postgres create my-db

The DATABASE_URL is automatically added to your environment.

External Databases​

For external databases, ensure they're accessible from Vercel's edge:

  • Neon: Serverless PostgreSQL (recommended)
  • PlanetScale: MySQL-compatible
  • Supabase: PostgreSQL with extras
  • Railway: Any database
# Neon
DATABASE_URL="postgresql://user:pass@ep-xxx.us-east-2.aws.neon.tech/mydb?sslmode=require"

Build Configuration​

vercel.json​

Customize your deployment:

vercel.json
{
  "framework": "nextjs",
  "buildCommand": "prisma generate && next build",
  "installCommand": "npm install",
  "regions": ["iad1"],
  "functions": {
    "api/**/*.ts": {
      "maxDuration": 30
    }
  },
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        {
          "key": "Access-Control-Allow-Origin",
          "value": "*"
        }
      ]
    }
  ]
}

Custom Build Command​

For Prisma projects:

{
  "buildCommand": "prisma generate && prisma migrate deploy && next build"
}

Edge Functions​

Deploy API routes to the edge for lower latency:

src/app/api/hello/route.ts
export const runtime = 'edge';

export async function GET() {
  return Response.json({ hello: 'world' });
}

Cron Jobs​

Schedule recurring tasks:

vercel.json
{
  "crons": [
    {
      "path": "/api/cron/cleanup",
      "schedule": "0 0 * * *"
    },
    {
      "path": "/api/cron/reports",
      "schedule": "0 9 * * 1"
    }
  ]
}
src/app/api/cron/cleanup/route.ts
export async function GET(request: Request) {
  // Verify it's from Vercel Cron
  const authHeader = request.headers.get('authorization');
  if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 });
  }

  // Your cleanup logic
  await cleanupOldSessions();

  return Response.json({ success: true });
}

Preview Deployments​

Every pull request gets a preview URL:

https://my-app-git-feature-branch-team.vercel.app

Preview Environment Variables​

Set preview-specific variables:

# Preview only
DATABASE_URL="postgresql://...preview-db..."
NEXT_PUBLIC_APP_URL="https://preview.myapp.com"

Production Domains​

Add Custom Domain​

vercel domains add myapp.com

Configure DNS​

Add the DNS records shown in the Vercel dashboard:

Type  Name    Value
A     @       76.76.21.21
CNAME www     cname.vercel-dns.com

Monorepo Support​

For monorepos, set the root directory:

vercel.json
{
  "framework": "nextjs",
  "outputDirectory": "apps/web/.next"
}

Or in dashboard: Settings → General → Root Directory

Troubleshooting​

Build Failures​

Check the build logs:

vercel logs

Common issues:

  1. Missing env vars: Ensure all required variables are set
  2. Prisma: Add prisma generate to build command
  3. Node version: Set in package.json or vercel.json
package.json
{
  "engines": {
    "node": "20.x"
  }
}

Database Connection Issues​

For serverless, use connection pooling:

DATABASE_URL="postgresql://...?pgbouncer=true&connection_limit=1"

Large Bundles​

Analyze your bundle:

ANALYZE=true npm run build

GitHub Actions Integration​

Deploy via GitHub Actions:

.github/workflows/deploy.yml
name: Deploy to Vercel

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

Cost Optimization​

Function Invocations​

  • Use export const revalidate = 3600 for caching
  • Implement proper error boundaries
  • Use Edge Runtime when possible

Bandwidth​

  • Optimize images with next/image
  • Enable compression
  • Use CDN for static assets

Database​

  • Connection pooling (PgBouncer, Prisma Data Proxy)
  • Query optimization
  • Proper indexing