Vercel — Deployment
Vercel is a cloud platform for static sites and serverless functions, optimized for frontend frameworks like Next.js, SvelteKit, and Nuxt. It provides automatic deployments, preview URLs, edge functions, and global CDN distribution with zero configuration for most frameworks.
Deploying to Vercel is as simple as connecting a Git repository — every push to the main branch triggers a production deployment, while pull requests get their own preview URL for testing.
Vercel automatically detects your framework from package.json dependencies and configures the build command, output directory, and deployment settings accordingly. It supports 30+ frameworks out of the box.
| Framework | Build Command | Output Directory |
|---|---|---|
| Next.js | next build | .next |
| SvelteKit | svelte-kit build | build |
| Nuxt | nuxt build | .output/public |
| Astro | astro build | dist |
| Vite | vite build | dist |
| Hugo | hugo | public |
info
The vercel.json file configures deployment behavior, headers, redirects, rewrites, environment variables, and more. It sits at the root of your project.
| 1 | { |
| 2 | "framework": "nextjs", |
| 3 | "buildCommand": "npm run build", |
| 4 | "outputDirectory": ".next", |
| 5 | "installCommand": "npm ci", |
| 6 | "regions": ["iad1", "hnd1"], |
| 7 | "functions": { |
| 8 | "api/**/*.ts": { |
| 9 | "maxDuration": 30, |
| 10 | "memory": 512 |
| 11 | } |
| 12 | }, |
| 13 | "headers": [ |
| 14 | { |
| 15 | "source": "/(.*)", |
| 16 | "headers": [ |
| 17 | { |
| 18 | "key": "X-Frame-Options", |
| 19 | "value": "DENY" |
| 20 | }, |
| 21 | { |
| 22 | "key": "X-Content-Type-Options", |
| 23 | "value": "nosniff" |
| 24 | }, |
| 25 | { |
| 26 | "key": "Referrer-Policy", |
| 27 | "value": "strict-origin-when-cross-origin" |
| 28 | } |
| 29 | ] |
| 30 | }, |
| 31 | { |
| 32 | "source": "/_next/static/(.*)", |
| 33 | "headers": [ |
| 34 | { |
| 35 | "key": "Cache-Control", |
| 36 | "value": "public, max-age=31536000, immutable" |
| 37 | } |
| 38 | ] |
| 39 | } |
| 40 | ], |
| 41 | "redirects": [ |
| 42 | { |
| 43 | "source": "/old-page", |
| 44 | "destination": "/new-page", |
| 45 | "permanent": true |
| 46 | } |
| 47 | ], |
| 48 | "rewrites": [ |
| 49 | { |
| 50 | "source": "/api/(.*)", |
| 51 | "destination": "/api/$1" |
| 52 | } |
| 53 | ] |
| 54 | } |
Vercel automatically deploys files in the api/ directory as serverless functions. Each file becomes an HTTP endpoint. In Next.js, API routes under pages/api/ or app/api/ work the same way.
| 1 | // api/hello.ts → https://example.com/api/hello |
| 2 | import type { VercelRequest, VercelResponse } from '@vercel/node'; |
| 3 | |
| 4 | export default function handler( |
| 5 | req: VercelRequest, |
| 6 | res: VercelResponse |
| 7 | ) { |
| 8 | const { name = 'World' } = req.query; |
| 9 | |
| 10 | res.status(200).json({ |
| 11 | message: `Hello, ${name}!`, |
| 12 | method: req.method, |
| 13 | timestamp: new Date().toISOString(), |
| 14 | }); |
| 15 | } |
| 16 | |
| 17 | // With Edge Runtime (faster, global) |
| 18 | // api/hello-edge.ts |
| 19 | export const config = { |
| 20 | runtime: 'edge', |
| 21 | }; |
| 22 | |
| 23 | export default function handler(req: Request) { |
| 24 | return new Response( |
| 25 | JSON.stringify({ message: 'Hello from the edge!' }), |
| 26 | { |
| 27 | headers: { 'Content-Type': 'application/json' }, |
| 28 | } |
| 29 | ); |
| 30 | } |
Serverless function limits:
| Property | Standard | Edge |
|---|---|---|
| Max Duration | 10s (Hobby), 60s (Pro), 900s (Enterprise) | 30s |
| Memory | 512 MB (default), up to 3008 MB | 128 MB |
| Code Size | 50 MB (uncompressed) | 4 MB |
| Regions | Single region (configurable) | Global (all regions) |
Every Git branch (especially pull requests) gets a unique preview URL. These are automatically generated and posted as a comment on the PR by the Vercel bot integration.
| 1 | # Preview URL pattern: |
| 2 | https://project-name-git-branch-hash.vercel.app |
| 3 | |
| 4 | # Examples: |
| 5 | https://my-app-git-feature-login-a1b2c3.vercel.app |
| 6 | https://my-app-git-fix-header-d4e5f6.vercel.app |
| 7 | |
| 8 | # Custom preview domain with vercel.json: |
| 9 | { |
| 10 | "alias": ["preview-myapp.example.com"] |
| 11 | } |
| 12 | |
| 13 | # Promote preview to production |
| 14 | vercel --prod |
| 15 | |
| 16 | # List all preview URLs |
| 17 | vercel list |
pro tip
Vercel supports environment variables per environment (Production, Preview, Development). Manage them via the dashboard, CLI, or vercel.json.
| 1 | # Add environment variable via CLI |
| 2 | vercel env add DATABASE_URL production |
| 3 | # Prompts for value, then confirms |
| 4 | |
| 5 | # Add with explicit value |
| 6 | echo "postgres://..." | vercel env add DATABASE_URL production --sensitive |
| 7 | |
| 8 | # Add environment variables for preview |
| 9 | vercel env add NEXT_PUBLIC_API_URL preview |
| 10 | |
| 11 | # List environment variables |
| 12 | vercel env list |
| 13 | |
| 14 | # Pull environment variables locally |
| 15 | vercel env pull .env.local |
warning
Vercel provides automatic SSL certificates via Let's Encrypt for all custom domains. Add domains through the dashboard or CLI.
| 1 | # Add a custom domain |
| 2 | vercel domains add example.com |
| 3 | |
| 4 | # Verify domain ownership (add DNS records): |
| 5 | # Type: CNAME |
| 6 | # Name: @ |
| 7 | # Value: cname.vercel-dns.com |
| 8 | |
| 9 | # Add subdomain |
| 10 | vercel domains add www.example.com |
| 11 | |
| 12 | # Redirect apex to www (or vice versa) |
| 13 | # Configure in vercel.json: |
| 14 | { |
| 15 | "redirects": [ |
| 16 | { |
| 17 | "source": "/", |
| 18 | "destination": "https://www.example.com", |
| 19 | "permanent": true |
| 20 | } |
| 21 | ] |
| 22 | } |
| 23 | |
| 24 | # List all domains |
| 25 | vercel domains list |
Vercel teams allow multiple developers to collaborate on projects with role-based access control. For monorepos, Vercel supports per-directory project configuration.
| 1 | // vercel.json for monorepo (project root) |
| 2 | { |
| 3 | "projects": [ |
| 4 | { |
| 5 | "name": "web", |
| 6 | "directory": "apps/web", |
| 7 | "framework": "nextjs" |
| 8 | }, |
| 9 | { |
| 10 | "name": "docs", |
| 11 | "directory": "apps/docs", |
| 12 | "framework": "nextjs" |
| 13 | }, |
| 14 | { |
| 15 | "name": "api", |
| 16 | "directory": "packages/api", |
| 17 | "framework": "nodejs" |
| 18 | } |
| 19 | ] |
| 20 | } |
| 21 | |
| 22 | // Or use per-project vercel.json in each app directory |
| 23 | // apps/web/vercel.json: |
| 24 | { |
| 25 | "name": "web", |
| 26 | "framework": "nextjs", |
| 27 | "buildCommand": "cd ../.. && npm run build:web" |
| 28 | } |
best practice