Configure Vercel local development with hot reload and testing.
Use when setting up a development environment, configuring test workflows,
or establishing a fast iteration cycle with Vercel.
Trigger with phrases like "vercel dev setup", "vercel local development",
"vercel dev environment", "develop with vercel".
Run Vercel serverless functions and API routes locally using vercel dev. Covers environment variable management, hot reload, local testing patterns, and framework-specific dev servers.
Prerequisites
Completed vercel-install-auth setup
Project linked via vercel link
Node.js 18+ with npm/pnpm
Instructions
Step 1: Pull Environment Variables
# Pull env vars from Vercel to local .env files
vercel env pull .env.development.local
# This creates .env.development.local with all Development-scoped vars:
# VERCEL="1"
# VERCEL_ENV="development"
# DATABASE_URL="postgres://..."
# API_SECRET="sk-..."
Step 2: Start Local Dev Server
# vercel dev starts a local server that emulates the Vercel platform
vercel dev
# Output:
# Vercel CLI 39.x.x — dev command
# > Ready on http://localhost:3000
# With a specific port
vercel dev --listen 8080
# With debug logging
vercel dev --debug
vercel dev provides:
Serverless function emulation at /api/* routes
Automatic TypeScript compilation
vercel.json rewrites, redirects, and headers applied locally
Environment variables loaded from .env*.local files
# Test your API route
curl http://localhost:3000/api/hello
# {"message":"Hello from Vercel Serverless Function!"}
# Test with POST body
curl -X POST http://localhost:3000/api/users \
-H "Content-Type: application/json" \
-d '{"name":"test","email":"[email protected]"}'
# Test with query parameters
curl "http://localhost:3000/api/search?q=vercel&limit=10"
Step 4: Framework-Specific Dev Servers
For frameworks with their own dev server, use those instead of vercel dev:
# Next.js — built-in Vercel compatibility
npx next dev
# API routes at pages/api/* or app/api/* work identically
# Nuxt
npx nuxi dev
# SvelteKit
npm run dev
# Astro
npx astro dev
The framework dev servers handle API routes natively. Use vercel dev only for plain serverless function projects without a framework.
Step 5: Local Environment Variable Management
# Add a new env var for development only
vercel env add MY_VAR development
# Prompts for value, stores encrypted on Vercel
# List all env vars
vercel env ls
# Remove an env var
vercel env rm MY_VAR development
# Pull updated vars after changes
vercel env pull .env.development.local
