vercel-deployment

Vercel Deployment

Expert knowledge for deploying to Vercel with Next.js

Capabilities

• vercel
• deployment
• edge-functions
• serverless
• environment-variables

Prerequisites

• Required skills: nextjs-app-router

Patterns

Environment Variables Setup

Properly configure environment variables for all environments

When to use: Setting up a new project on Vercel

// Three environments in Vercel: // - Development (local) // - Preview (PR deployments) // - Production (main branch)

// In Vercel Dashboard: // Settings → Environment Variables

// PUBLIC variables (exposed to browser) NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...

// PRIVATE variables (server only) SUPABASE_SERVICE_ROLE_KEY=eyJ... // Never NEXT_PUBLIC_! DATABASE_URL=postgresql://...

// Per-environment values: // Production: Real database, production API keys // Preview: Staging database, test API keys // Development: Local/dev values (also in .env.local)

// In code, check environment: const isProduction = process.env.VERCEL_ENV === 'production' const isPreview = process.env.VERCEL_ENV === 'preview'

Edge vs Serverless Functions

Choose the right runtime for your API routes

When to use: Creating API routes or middleware

// EDGE RUNTIME - Fast cold starts, limited APIs // Good for: Auth checks, redirects, simple transforms

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

export async function GET() { return Response.json({ message: 'Hello from Edge!' }) }

// middleware.ts (always edge) export function middleware(request: NextRequest) { // Fast auth checks here }

// SERVERLESS (Node.js) - Full Node APIs, slower cold start // Good for: Database queries, file operations, heavy computation

// app/api/users/route.ts export const runtime = 'nodejs' // Default, can omit

export async function GET() { const users = await db.query('SELECT * FROM users') return Response.json(users) }

Build Optimization

Optimize build for faster deployments and smaller bundles