#Deploying to Vercel¶

Vercel is built by the team behind Next.js. Deploying there is the lowest-friction option: every push to GitHub becomes a preview URL; every push to main is a production deploy.

Setup (One-Time)¶

1Push your project to GitHub
2Visit vercel.com/new → "Import Project"
3Pick the repo → Vercel detects Next.js automatically
4Add environment variables (DATABASE_URL, SESSION_SECRET, etc.)
5Click Deploy

That's it. Within ~90 seconds you have a live URL.

Environment Variables¶

Type	Available in
Production	Production deploys
Preview	PR & branch deploys
Development	`vercel env pull` for local

Pull production env to your machine:

bash

1 line

1npx vercel env pull .env.local

Preview Deployments¶

Every branch gets a preview URL like my-app-feature-x-username.vercel.app. Share with stakeholders before merging.

Custom Domains¶

Project Settings → Domains → add yourdomain.com. Vercel issues a Let's Encrypt cert automatically. DNS:

Type	Name	Value
A	@	76.76.21.21
CNAME	www	cname.vercel-dns.com

Edge & Serverless Functions¶

By default:

Static pages → CDN
Dynamic pages → Serverless Functions (Node.js)
Routes with runtime = "edge" → Edge Functions
Middleware → Edge Functions

Each lives at a different layer of the network — Vercel routes requests transparently.

Caching & ISR on Vercel¶

revalidateTag, revalidatePath, and ISR work out of the box. The cache is shared across all regions and invalidations propagate in seconds.

Image Optimization¶

next/image uses Vercel's image optimization service automatically. No sharp required, no Docker tricks.

Production Checklist¶

Before flipping the switch:

All env vars set in Vercel
metadataBase set in app/layout.tsx
sitemap.ts and robots.ts present
next build runs locally without warnings
Largest Contentful Paint < 2.5s on a real device
Sentry or similar error tracking installed
DB connection pooling configured

Observability¶

Vercel Analytics + Speed Insights are one-click:

bash

1 line

1npm i @vercel/analytics @vercel/speed-insights

tsx

15 lines

1// app/layout.tsx
2import { Analytics } from "@vercel/analytics/next";
3import { SpeedInsights } from "@vercel/speed-insights/next";
4
5export default function RootLayout({ children }: { children: React.ReactNode }) {
6  return (
7    <html>
8      <body>
9        {children}
10        <Analytics />
11        <SpeedInsights />
12      </body>
13    </html>
14  );
15}

Real-user metrics, automatically, no setup.

Cost Model (At a Glance)¶

Resource	Free Tier	Paid
Bandwidth	100 GB	$0.15/GB after
Edge function invocations	1M	$2/M after
Serverless invocations	1M	$0.65/M after
Build minutes	6000/month	$0.20/min after
Image optimizations	5000	included in Pro

For most early-stage apps, the free tier is generous. The paid plan ($20/seat) kicks in for production traffic.

Type

Available in

Production

Production deploys

Preview

PR & branch deploys

Development

vercel env pull for local

Type

Name

Value

76.76.21.21

CNAME

www

cname.vercel-dns.com

Observability¶

Vercel Analytics + Speed Insights are one-click:

bash

1 line

1npm i @vercel/analytics @vercel/speed-insights

tsx

15 lines

1// app/layout.tsx
2import { Analytics } from "@vercel/analytics/next";
3import { SpeedInsights } from "@vercel/speed-insights/next";
4
5export default function RootLayout({ children }: { children: React.ReactNode }) {
6  return (
7    <html>
8      <body>
9        {children}
10        <Analytics />
11        <SpeedInsights />
12      </body>
13    </html>
14  );
15}

Real-user metrics, automatically, no setup.

Cost Model (At a Glance)¶

Resource	Free Tier	Paid
Bandwidth	100 GB	$0.15/GB after
Edge function invocations	1M	$2/M after
Serverless invocations	1M	$0.65/M after
Build minutes	6000/month	$0.20/min after
Image optimizations	5000	included in Pro

For most early-stage apps, the free tier is generous. The paid plan ($20/seat) kicks in for production traffic.