How to Deploy Next.js on Vercel Step-by-Step (2026 Guide)

How to Deploy Next.js on Vercel Step-by-Step — The Complete 2026 Guide

Vercel is built by the same team that created Next.js. Deploying there is not just the easiest option — it is the most optimized one. Edge functions, automatic image optimization, preview deployments, and zero-config builds all work out of the box.

But "just connect your GitHub repo" skips a lot of important details. Environment variables, custom domains, deployment regions, preview URLs, build configuration, and rollbacks all need to be set up correctly before you go to production.

This guide covers the complete deployment flow — from your first push to a hardened production setup — with every step you actually need in 2026.

🎯 Quick Answer (30-Second Read)

Fastest path: Connect GitHub repo to Vercel → auto-detects Next.js → deploys in 2 minutes
Custom domain: Add in Vercel dashboard → update DNS → HTTPS is automatic
Environment variables: Set in Vercel dashboard under Project Settings → never commit .env files
Preview deployments: Every pull request gets its own live URL automatically
Production deploy: Merging to main triggers production deployment automatically
Cost to start: Free on Hobby plan — upgrade to Pro ($20/mo) when you need team access or SLAs

How Vercel Deploys Next.js

flowchart TD A([👨‍💻 git push / merge to main]) --> B[GitHub Repository] B -->|webhook trigger| C[Vercel Build Pipeline] C --> D{Branch?} D -->|main / master| E[Production Build] D -->|feature branch\nor PR| F[Preview Build] E --> G[Install dependencies\nnpm ci / pnpm install] F --> G G --> H[Run next build] H --> I{Build\nsuccessful?} I -->|❌ Failed| J[Build logs\nNotify via email/Slack] I -->|✅ Passed| K[Output Analysis] K --> L[Static assets\nto CDN Edge Network] K --> M[Server components\nto Serverless Functions] K --> N[API routes\nto Edge Functions] L --> O([🌍 Production URL\nyour-app.vercel.app]) M --> O N --> O F -->|unique URL per PR| P([🔗 Preview URL\nbranch-name.vercel.app]) style A fill:#0f172a,color:#e2e8f0,stroke:#334155 style O fill:#166534,color:#dcfce7,stroke:#16a34a style P fill:#1e3a5f,color:#bfdbfe,stroke:#3b82f6 style J fill:#7f1d1d,color:#fecaca,stroke:#ef4444 style C fill:#1e293b,color:#cbd5e1,stroke:#475569 style D fill:#1e293b,color:#cbd5e1,stroke:#475569 style E fill:#1e293b,color:#cbd5e1,stroke:#475569 style F fill:#1e293b,color:#cbd5e1,stroke:#475569 style G fill:#1e293b,color:#cbd5e1,stroke:#475569 style H fill:#1e293b,color:#cbd5e1,stroke:#475569 style I fill:#78350f,color:#fef3c7,stroke:#f59e0b style K fill:#1e293b,color:#cbd5e1,stroke:#475569 style L fill:#312e81,color:#e0e7ff,stroke:#6366f1 style M fill:#312e81,color:#e0e7ff,stroke:#6366f1 style N fill:#312e81,color:#e0e7ff,stroke:#6366f1

Every push triggers this pipeline automatically. You never run a deploy command manually in a healthy Vercel setup.

Prerequisites

Before deploying, make sure you have:

A Next.js project pushed to a GitHub, GitLab, or Bitbucket repository
A Vercel account — sign up free at vercel.com using your GitHub account
Environment variables documented somewhere — you will need them during setup

If your Next.js app runs locally with npm run dev, it will deploy on Vercel. No special configuration required for standard projects.

Step-by-Step: Deploy Next.js on Vercel

Step 1 — Import Your Repository

Go to vercel.com/new and sign in
Click Add New Project
Select Import Git Repository
Find your Next.js repo and click Import

Vercel automatically detects Next.js and sets the correct build command (next build) and output directory (.next). You do not need to change these.

Step 2 — Configure Environment Variables Before First Deploy

This is the step most developers skip and then wonder why their app crashes on first deploy.

In the Environment Variables section before clicking Deploy:

# Add every variable from your .env.local
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
DATABASE_URL=your-database-url
NEXTAUTH_SECRET=your-secret
NEXTAUTH_URL=https://your-production-domain.com

Rules for environment variables on Vercel:

Variables prefixed with NEXT_PUBLIC_ are exposed to the browser — treat them as public
All other variables are server-only — safe for API keys and secrets
Set separate values for Production, Preview, and Development environments
Never commit .env.local or .env.production to your repository

Step 3 — Deploy

Click Deploy. Vercel runs next build, analyzes your output, and distributes assets across its global edge network.

First deploy takes 2–4 minutes. Subsequent deploys are faster due to build caching.

Watch the build log in real time. If it fails, the error message is displayed with the exact line that caused it.

Step 4 — Verify Your Deployment

After deploy completes, Vercel gives you three URLs:

your-project.vercel.app — your production URL
A unique deployment URL for this specific build
A branch URL if deployed from a non-main branch

Open the production URL and verify:

# Check that your app loads correctly
# Test authenticated routes if you have auth
# Verify environment-dependent features (database, payments)
# Check the browser console for any client-side errors

Step 5 — Add a Custom Domain

Go to your project dashboard → Settings → Domains
Click Add Domain and enter your domain (e.g. yourdomain.com)
Vercel shows you the DNS records to add:

# Add these at your domain registrar (Namecheap, GoDaddy, Cloudflare, etc.)

# For apex domain (yourdomain.com)
Type: A
Name: @
Value: 76.76.21.21

# For www subdomain
Type: CNAME
Name: www
Value: cname.vercel-dns.com

DNS propagation takes 5 minutes to 48 hours depending on your registrar
HTTPS is provisioned automatically by Vercel — no SSL certificate setup required

If you use Cloudflare: Set the proxy status to DNS only (grey cloud) for the records pointing to Vercel. Cloudflare proxying conflicts with Vercel's SSL provisioning.

Step 6 — Configure Your vercel.json (Optional but Recommended)

For most projects you do not need a vercel.json. Add one when you need:

{
  "regions": ["bom1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" },
        { "key": "X-Content-Type-Options", "value": "nosniff" }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-path",
      "destination": "/new-path",
      "permanent": true
    }
  ]
}

regions — deploy serverless functions closer to your users or database. bom1 is Mumbai. Use iad1 (Washington DC) for US-primary apps, cdg1 for Europe.

headers — add security headers to API routes or specific paths globally.

redirects — handle URL migrations without touching your Next.js code.

Step 7 — Set Up Preview Deployments for Your Team

Preview deployments are one of Vercel's most underused features. Every pull request gets a unique live URL automatically — no extra configuration needed.

To make the most of them:

Go to Settings → Git → enable Preview Deployments
Share preview URLs with designers, PMs, or clients for review before merging
Add preview environment variables separately from production ones — point them at staging databases and test Stripe keys

# In Vercel dashboard — set these for Preview environment only
STRIPE_SECRET_KEY=sk_test_your-test-key        # test mode for previews
DATABASE_URL=your-staging-database-url          # staging DB for previews
NEXTAUTH_URL=https://branch-name.vercel.app     # dynamic preview URL

Step 8 — Configure Automatic Rollbacks

If a production deploy breaks something, Vercel makes rollback instant.

Go to your project dashboard → Deployments
Find the last working deployment
Click the three-dot menu → Promote to Production

The previous build is live again in under 30 seconds. No redeploy, no rebuild.

For critical production apps, enable Deployment Protection under Settings → Git to require a passing CI check before any deploy goes live.

Deploy via Vercel CLI (Alternative Method)

If you prefer terminal-based deployment over the dashboard:

# Install Vercel CLI globally
npm install -g vercel

# Login
vercel login

# Deploy from your project directory
cd your-next-app

# First deploy — interactive setup
vercel

# Deploy to production
vercel --prod

# Pull environment variables to local .env.local
vercel env pull .env.local

The CLI is especially useful for:

Deploying from CI/CD pipelines (GitHub Actions, CircleCI)
Automating deployments in scripts
Pulling remote environment variables to your local machine

Common Deployment Errors and Fixes

Error	Cause	Fix
`Build failed: Cannot find module`	Missing dependency in `package.json`	Run `npm install` locally, commit `package-lock.json`
`Environment variable not found`	Variable missing in Vercel dashboard	Add it under Project Settings → Environment Variables
`Function size exceeded`	Serverless function bundle too large	Use `next/dynamic` for heavy client imports, check bundle analyzer
`CORS error on API routes`	Missing headers on route handlers	Add `Access-Control-Allow-Origin` header in route or `vercel.json`
`404 on custom domain`	DNS not propagated or misconfigured	Verify A record points to `76.76.21.21`, check Vercel domain status
`NEXTAUTH_URL mismatch`	Auth URL set to localhost in production	Update `NEXTAUTH_URL` env var to your production domain
`Hydration mismatch`	Server/client render difference	Check for `typeof window` usage, date formatting, or random values

Production Checklist Before Going Live

Run through this before pointing your real domain at Vercel:

All environment variables set for Production environment
NEXTAUTH_URL or equivalent auth URL points to production domain
Stripe keys switched from sk_test_ to sk_live_
Database connection string points to production database (not local or staging)
Custom domain added and DNS verified in Vercel dashboard
Preview deployments use test/staging credentials, not production ones
Deployment Protection enabled — CI must pass before deploy goes live
Error monitoring set up (Sentry, Vercel Analytics, or LogDrain)
next/image domains configured in next.config.js for external image sources
Rate limiting on sensitive API routes (auth, payments, user actions)

Vercel Plan Comparison

Feature	Hobby (Free)	Pro ($20/mo)	Enterprise
Custom domains	✅ Yes	✅ Yes	✅ Yes
Preview deployments	✅ Yes	✅ Yes	✅ Yes
Bandwidth	100GB/mo	1TB/mo	Custom
Serverless function duration	10s	300s	900s
Team members	1	Unlimited	Unlimited
Password protection	❌ No	✅ Yes	✅ Yes
SLA	❌ No	❌ No	✅ Yes
Log retention	1 hour	3 days	Custom
Best for	Side projects	Production SaaS	Enterprise apps

Stay on Hobby if: you are building a side project or personal app with low traffic.
Upgrade to Pro if: you have a team, need longer function execution, or your app handles real users.

Real Developer Use Case

A developer building a B2B SaaS on Next.js and Supabase deployed to Vercel on day one of the project. Every feature branch got a preview URL — the designer reviewed UI changes on live preview deployments before any PR was merged, without needing a local setup.

When a bad migration broke the production build three weeks in, they rolled back to the previous deployment in under a minute from the Vercel dashboard. The fix was implemented on a branch, reviewed on a preview URL, then merged and deployed to production — all within two hours of the incident.

The total deployment infrastructure cost for the first three months of the product: $0 on the Hobby plan.

Frequently Asked Questions

Does Vercel work with Next.js App Router and Server Components?
Yes — Vercel has first-class support for Next.js App Router, React Server Components, Server Actions, and streaming. These features are designed to run on Vercel's infrastructure. Edge Runtime and Node.js Runtime are both supported depending on your route configuration.

Can I deploy a Next.js app on Vercel for free?
Yes. The Hobby plan is free and includes custom domains, preview deployments, HTTPS, and global CDN. It is sufficient for side projects and early-stage products. The main limitations are single user, 100GB bandwidth, and 10-second serverless function timeout.

How do I set different environment variables for preview vs production?
In the Vercel dashboard under Project Settings → Environment Variables, each variable has a scope selector: Production, Preview, and Development. Set your live API keys for Production only, and test/staging keys for Preview. This prevents test actions from running against your real database or payment processor.

What happens if my Next.js build fails on Vercel?
The previous production deployment stays live — Vercel never replaces a working deployment with a failed one. You get a build log with the exact error, and a notification via email (or Slack if configured). Fix the issue, push the fix, and the new build attempt runs automatically.

Is Vercel the only way to deploy Next.js?
No. Next.js can be self-hosted on any Node.js server, deployed to AWS (via SST or Amplify), Railway, Render, Fly.io, or Docker containers. But Vercel offers the tightest integration because they build both products. Features like ISR, Edge Middleware, and Image Optimization work most reliably on Vercel without additional configuration.

Conclusion

Deploying Next.js on Vercel is genuinely one of the smoothest deployment experiences in web development. The defaults are good, the build pipeline is fast, and preview deployments make team collaboration effortless.

Get your first deploy live in under 10 minutes by connecting your GitHub repo. Harden it for production by setting environment variables correctly, adding your custom domain, and enabling deployment protection before real users arrive.

The developers who get the most out of Vercel are the ones who use preview deployments for every PR, keep production and preview environment variables strictly separated, and know how to roll back in 30 seconds when something goes wrong.