Vercel is the default deployment platform for frontend and full-stack JavaScript projects in 2026 — not because it is perfect, but because its git integration, preview deployments, and framework auto-detection remove so much friction that alternatives rarely win on DX. This guide walks you through a correct production setup.
What changed in 2026
- Vercel AI SDK v4 is deeply integrated — AI functions, streaming, and model routing are first-class primitives, not add-ons.
- Fluid compute replaces the old Serverless/Edge binary — functions now auto-scale between cold serverless and always-on instances based on traffic pattern.
- Build cache is smarter — turbo-remote-cache integration means monorepo builds only rebuild changed packages.
vercel.json v4 schema — the rewrites/headers API changed; update old config files.- Vercel Postgres and KV are generally available — managed Postgres (Neon-backed) and Redis (Upstash-backed) from the same dashboard.
Fastest path: git integration
- Push your project to GitHub, GitLab, or Bitbucket.
- Go to vercel.com, click Add New Project, import the repo.
- Vercel detects your framework and pre-fills build settings.
- Click Deploy.
That is a live URL in ~90 seconds for most Next.js or Vite projects.
Vercel CLI for local workflow
npm install -g vercel
vercel login
vercel link # link local dir to a Vercel project
vercel env pull # download .env.local from the dashboard
vercel dev # local dev with edge runtime emulation
vercel --prod # deploy to production from CLI
Use vercel env pull to sync environment variables to your local machine instead of maintaining a separate .env.local manually.
Environment variables
# Add via CLI
vercel env add DATABASE_URL production
vercel env add DATABASE_URL preview
vercel env add DATABASE_URL development
# Or batch-import from a .env file (never commit this file)
vercel env import .env.local
In the dashboard, mark sensitive variables as Sensitive — they are write-only after saving.
Client-side exposure rules by framework:
| Framework |
Client-exposed prefix |
| Next.js |
NEXT_PUBLIC_ |
| SvelteKit |
PUBLIC_ |
| Nuxt |
NUXT_PUBLIC_ |
| Vite (generic) |
VITE_ |
Never expose secrets with these prefixes — they are bundled into the client.
Preview deployments
Every PR/branch push creates a unique preview URL (my-app-git-feature-xyz-org.vercel.app). This is Vercel's most underused feature.
- Set protection — add Vercel Authentication or a password to preview URLs so they are not publicly crawlable.
- Use preview-specific env vars — connect a staging database for preview deployments, not production.
- Comment the URL on PRs via the Vercel GitHub app — reviewers can click and test without running anything locally.
Edge Functions vs Serverless Functions in 2026
|
Edge Function |
Serverless Function |
| Runtime |
V8 isolate (no Node APIs) |
Node.js 22 |
| Cold start |
~0 ms |
~100–500 ms |
| Execution limit |
30 s |
900 s (Pro) |
| Global replication |
Yes |
Regional |
| Use case |
Auth, redirects, A/B |
DB queries, heavy compute |
// app/api/hello/route.ts (Next.js App Router — Edge)
export const runtime = "edge";
export function GET() {
return new Response(JSON.stringify({ hello: "world" }), {
headers: { "Content-Type": "application/json" },
});
}
Mark a function as edge only if it genuinely benefits from global distribution and does not need Node.js APIs.
vercel.json configuration
{
"rewrites": [
{ "source": "/api/:path*", "destination": "https://api.example.com/:path*" }
],
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "X-Content-Type-Options", "value": "nosniff" },
{ "key": "X-Frame-Options", "value": "DENY" }
]
}
],
"regions": ["iad1"]
}
Pinning to a region (iad1 = US East) reduces latency variance for server functions that connect to a single-region database.
How to pick the right plan
| Plan |
Best for |
Key limit |
| Hobby (free) |
Side projects, learning |
100 GB bandwidth/month |
| Pro (~$20/dev/month) |
Production apps |
1 TB bandwidth, SLA |
| Enterprise |
Large teams, compliance |
Custom |
Move to Pro before launch if you charge users money. Bandwidth overages on Hobby are expensive.
Common mistakes
Committing .env files. Vercel injects environment variables at build time; committed secrets end up in your git history and your deployed bundle.
Using Edge Runtime for database-heavy routes. Most ORMs (Prisma, Drizzle) require Node.js. Use serverless functions for DB-touching routes; use edge for lightweight middleware only.
Not setting regions for serverless functions. A function in sin1 (Singapore) querying a Postgres instance in us-east-1 adds ~200 ms per query. Co-locate your function and database.
Ignoring build logs. Vercel's build output shows exactly which files are being bundled into which functions. A 50 MB function bundle is a red flag.
What to skip
- Manual CI/CD pipelines to Vercel — the git integration is better than anything you will build; use it.
vercel --prod from a developer laptop without CI — bypasses preview deployments and review gates.- Serverless functions for long-running jobs (>15 min) — use Vercel Cron + a queue (Inngest, Trigger.dev) instead.
FAQ
Can I host a plain static site on Vercel?
Yes — Vercel deploys any directory of HTML/CSS/JS. It is free and very fast via their CDN.
How do I roll back a deployment?
In the Vercel dashboard, go to Deployments, select any previous deployment, and click Promote to Production. Instant rollback with no redeployment.
Does Vercel support monorepos?
Yes — set the Root Directory to the specific app subdirectory in project settings. Each app in a monorepo can be a separate Vercel project.
What about non-JavaScript backends?
Vercel supports Python, Ruby, and Go serverless functions, but the DX is second-class compared to Node. For non-JS backends, consider Railway or Fly.io alongside Vercel for the frontend.
Where to go next