Vercel
Deploying on Vercel
Zero-config deploys, preview URLs, and where the bill actually comes from on Vercel.
7 min read · Updated July 1, 2026
Vercel is the platform most frontend developers reach for first. Connect a Git repo, push, get a URL. That flow is still the best in the business.
If you built your app with Next.js, Vercel feels like home. But Vercel is not only Next — Astro, SvelteKit, Nuxt, and plain static sites all deploy cleanly.
Zero-config deploys
The magic is framework detection. Vercel reads your repo, picks the right build command, and wires serverless or edge functions from your framework’s conventions.
Typical flow:
- Import the repo on vercel.com
- Confirm the framework preset (or let it auto-detect)
- Add environment variables
- Deploy
Your production domain points at the latest successful build on main. Every push triggers a new deployment. Rollbacks are one click.
For a static Astro site, the build output lands on Vercel’s CDN. For Next.js with server components, Vercel splits static assets, serverless functions, and edge middleware automatically.
You rarely write a Dockerfile. That is the point.
Preview deployments
Every pull request gets its own URL.
Your teammate opens a PR. Vercel comments with my-app-git-feature-username.vercel.app. You test the branch in isolation. Stakeholders click a link without installing anything.
Preview deployments share the same build pipeline as production. Same env vars (with overrides if you configure them). Same function regions.
This alone saves hours on team projects. It is also perfect for solo devs who want a staging slot without maintaining a second server.
Serverless and edge functions
Vercel runs your dynamic code as functions, not as a long-lived Node process.
Serverless functions spin up on demand in a region you choose (or that Vercel picks). Good for API routes, auth callbacks, database queries. Cold starts exist but are usually acceptable for web traffic.
Edge functions run on Vercel’s edge network — closer to users, tighter CPU limits, Web APIs only. Middleware, geolocation, A/B flags, auth checks.
In Next.js, a file in app/api/hello/route.ts becomes a serverless function. Middleware in middleware.ts runs at the edge.
Know which path your code takes. Edge is faster globally but cannot do everything Node can.
Where costs come from
The hobby tier is free for personal projects. Production apps on Pro ($20/user/month) add more bandwidth, longer function duration, and team features.
Watch these meters:
Bandwidth — Every page view, every JS bundle download, every image counts. A heavy client-side app with large assets adds up faster than a lean SSR site.
Function invocations and duration — Each API hit runs a function. Slow handlers that talk to a distant database burn GB-hours of compute. Caching and colocation matter.
Edge middleware — Cheap per invocation but runs on every request if your middleware matches everything.
Build minutes — Large monorepos on busy teams can hit limits. Usually a secondary concern for indies.
Seats — Pro billing is per team member. A five-person startup is $100/month before bandwidth overages.
My advice: the sticker price is not the bill. A Next.js app with uncached server components hitting Postgres on every page view will cost more than a static marketing site. Model both.
When Vercel makes sense
Choose Vercel when:
- You ship Next.js (or another supported framework) and want the path of least resistance
- Preview URLs and Git integration are worth paying for
- Your backend is API-shaped — serverless functions plus a managed database elsewhere
- You do not want to think about TLS, CDN, or deploy scripts
StackPlan often ranks Vercel high for Jamstack apps, content sites with dynamic corners, and early-stage SaaS where developer speed beats infra tuning.
When to look elsewhere
Consider Railway, Fly.io, or a VPS when:
- You need a persistent WebSocket server or long-lived process
- Your workload is always-on and serverless billing would exceed a small VM
- You want one container you control end to end
- Egress and function duration would dominate on Vercel’s meters
Vercel is an opinionated host optimized for frontend frameworks. Lean into that opinion instead of fighting it.
If your app fits the model — Git push, preview links, serverless API — Vercel gets you live fast. The work left is knowing whether your traffic pattern stays friendly to their pricing.
Reading is one thing. Shipping is another.
Answer four questions about your app and StackPlan recommends a stack on Vercel, with real monthly costs at your traffic.
Plan my stack — free