Step-by-Step Guide · 2026

How to Deploy Next.js to Vercel

From a fresh Next.js app to a live production URL in 15 minutes. Covers GitHub import, environment variables, custom domains, preview deployments, and the gotchas that trip up most developers.

App Router compatibleNext.js 15 / 16Free Hobby planZero-config CI/CD

The Process

5 steps to deploy Next.js on Vercel

Each step takes 2–5 minutes. The whole process is under 15 minutes on your first deployment.

Step 1: Create (or prepare) your Next.js app

~2 min

If you don't have an app yet, scaffold one with the official CLI. For App Router (recommended for new projects in 2026):

npx create-next-app@latest my-app --typescript --tailwind --app --src-dir

Already have an app?

Make sure your package.json has a build script (Next.js adds this automatically). Vercel detects Next.js projects automatically — no Dockerfile needed.

Step 2: Push your code to GitHub

~3 min

Vercel deploys directly from your Git repository. Push to GitHub (GitLab and Bitbucket also work, but GitHub gives the richest integration).

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/your-username/my-app.git
git push -u origin main

Vercel creates a preview deploymentfor every branch and pull request automatically — you don't need to configure anything for this.

Step 3: Import your project to Vercel

~5 min

Go to vercel.com, sign up or log in with GitHub, then click Add New → Project and select your repository.

  1. 1Vercel detects Next.js automatically — the build command and output directory are pre-filled
  2. 2Leave the Framework Preset as Next.js (do not change this)
  3. 3Add any environment variables in the "Environment Variables" section before clicking Deploy
  4. 4Click Deploy — your first deployment takes 60–120 seconds

Critical: If your app uses process.env.SECRET_KEY in server code, add the variable here — not after. A deployment without required env vars will either fail the build or break at runtime.

Step 4: Configure environment variables correctly

Do this right

Vercel scopes environment variables to three environments. Using the wrong scope is the most common source of "works in preview, broken in prod" bugs.

ScopeWhen it's activeExample use
Productionmain branch deploys onlyLive DB, live Stripe key
Previewevery branch / PR deployStaging DB, Stripe test key
Developmentvercel dev locallyLocal DB, mock keys

Never prefix secrets with NEXT_PUBLIC_

NEXT_PUBLIC_ variables are baked into the browser JavaScript bundle. Anyone can read them in DevTools. Use this prefix only for things safe to expose: your Supabase anon key, your public API URL.

After adding or changing environment variables in the Vercel dashboard, you must redeployfor the changes to take effect. Env var changes alone don't trigger a new deploy.

Step 5: Connect a custom domain

~5 min

Your deployment gets a free *.vercel.app URL immediately. To use a custom domain:

  1. 1In your Vercel project, go to Settings → Domains → Add
  2. 2Enter your domain (e.g. myapp.com) and click Add
  3. 3Vercel shows you two DNS records to add: an A record for the apex domain and a CNAME for www
  4. 4Add those records in your domain registrar (Cloudflare, Namecheap, GoDaddy, etc.)
  5. 5SSL (HTTPS) is provisioned automatically — no certificate setup required

Propagation usually takes 1–10 minutes on Cloudflare, up to 48 hours on other registrars. Vercel checks domain health automatically and sends you an email once it's active.

Watch Out

4 gotchas that catch developers off-guard

Things Vercel's docs don't always make obvious until you've hit them in production.

Missing env vars = silent runtime failures

Vercel builds succeed even when required env vars are missing — the error only shows at request time. Always check the Deployments → Runtime Logs tab after each deploy.

process.env changes need a redeploy

Unlike code changes, editing env vars in the Vercel dashboard doesn't auto-deploy. Go to Deployments, find your latest build, and click Redeploy (without clearing cache) to pick up the new values.

Hobby plan has a 10-second serverless timeout

Serverless functions on the Hobby plan time out after 10 seconds. If you have long-running API routes (AI completions, PDF exports, large DB queries), upgrade to Pro (60s limit) or move them to Edge Functions / background tasks.

Large node_modules bloat build time

Vercel caches node_modules between builds, but the initial build for a heavy project can be slow. Use package imports (barrel shaking) and audit heavy dependencies — a 50 MB node_modules is often avoidable.

FAQ

Frequently asked questions

How long does deploying Next.js to Vercel take?

Your first deployment takes about 60–120 seconds for a typical Next.js app. After that, incremental rebuilds (only changed pages) are usually under 30 seconds. Zero-config CI/CD means every git push to main triggers a new production deploy automatically.

Is Vercel free for Next.js apps?

Yes — Vercel's Hobby plan is free forever for personal projects. It includes unlimited deployments, 100 GB bandwidth/month, preview deployments on every PR, and automatic HTTPS. The Pro plan ($20/month per member) adds team collaboration, more bandwidth, and enterprise features.

Can I deploy Next.js App Router on Vercel?

Yes, and Vercel has first-class support for App Router features: Server Components, Server Actions, Parallel Routes, and streaming. Vercel built the App Router architecture, so all features work out of the box without any extra configuration.

Where do I add environment variables for a Vercel Next.js deployment?

Go to your Vercel project → Settings → Environment Variables. Add them there before deploying. After adding variables, you must trigger a new deployment for them to take effect — env var changes alone don't redeploy. Never commit .env files to git.

Does Vercel create preview deployments automatically?

Yes. Every branch push and pull request gets its own preview URL (e.g. my-app-git-feature-xyz-username.vercel.app). The preview inherits your Preview environment variables, not Production ones — which is exactly what you want for staging databases and test API keys.

What's the difference between Vercel and self-hosting Next.js?

Vercel is the zero-config path: push to git, done. Self-hosting (on a VPS, Docker, or AWS) gives you more control over infrastructure costs and data residency, but requires you to manage Node.js process management, reverse proxies (nginx), SSL renewal, and scaling. For most projects, Vercel is the right default choice — switch to self-hosting only when Vercel's pricing or data residency requirements become a constraint.

Go Deeper

Related guides on this site

Best Practices

Production Next.js Architecture Guide

The full checklist: App Router patterns, ISR, security headers, Core Web Vitals, and structured data — everything beyond the deploy step.

Read more Blog Post

Deploy Next.js on Vercel: A Beginner's Narrative

Longer narrative walkthrough of the full Vercel setup, from zero to a monitored production deployment with analytics.

Read more Services

Hire a Next.js Developer

Need someone to handle the architecture, deployment pipeline, and production setup for you? Let's talk.

Read more
Need help with your deployment?

Skip the setup — hire a Next.js developer

I set up production-grade Next.js apps on Vercel every week: zero-config CI/CD, preview deployments, TypeScript strict, 95+ Lighthouse, structured data, and monitoring from day one. Free quote in 24 hours.

Hire a Next.js DeveloperGet a Free Quote