Vercel is the platform built by the creators of Next.js, making it the natural — and most powerful — choice for deploying Next.js applications. With zero-configuration deployments, global edge CDN, automatic HTTPS, and seamless Git integration, Vercel turns a complex deployment pipeline into a process that takes just a few minutes.
In this guide you will go from a local Next.js project to a fully live, production-grade URL — step by step, with explanations for every decision along the way.
Prerequisites
- •A Next.js project (version 12 or later recommended)
- •Node.js 18+ installed on your machine
- •A GitHub, GitLab, or Bitbucket account
- •A free Vercel account (vercel.com)
- •Git installed and your project committed to a repository
Prepare Your Next.js Project
Before deploying, make sure your project is production-ready. Run the build command locally to catch any errors early:
npm run buildIf the build passes without errors, your project is ready. Also ensure the following:
- •All environment variables are noted — add them in Vercel's dashboard, not in .env files committed to Git.
- •Your package.json has a "build" script (Next.js projects have this by default).
- •There are no hard-coded localhost URLs in your code — use relative paths or environment variables instead.
- •Your .gitignore excludes node_modules, .env.local, and .next.
Push Your Code to Git
Vercel deploys directly from a Git repository. If you haven't already, initialize a repo and push your project:
git initgit add .git commit -m "Initial commit"git remote add origin https://github.com/your-username/your-repo.gitgit push -u origin mainUse GitHub for the smoothest experience — Vercel's GitHub integration is the most feature-rich and supports automatic deploy previews for every pull request.
Create a Vercel Account
Visit vercel.com and sign up for a free account. The Hobby plan is completely free and more than sufficient for most personal and professional projects. When prompted, choose Continue with GitHub (or your preferred Git provider) — this links your account and grants Vercel permission to access your repositories.
What Vercel's free Hobby plan includes:
Import Your Repository
Once logged in to Vercel, click Add New → Project from the dashboard. Vercel will list all repositories your Git account has access to. Find your Next.js project and click Import.
Vercel automatically detects that the project is Next.js and pre-fills the correct framework preset. You will see:
- •
Framework Preset: Next.js (auto-detected) - •
Root Directory: ./ (change if your app is in a subfolder) - •
Build Command: next build (auto-filled) - •
Output Directory: .next (auto-filled) - •
Install Command: npm install (auto-filled)
You generally do not need to change any of these — Vercel handles Next.js out of the box, including App Router, Pages Router, Server Components, API Routes, and Middleware.
Configure Environment Variables
This is the step most beginners skip, causing their deployed app to break. Before clicking Deploy, expand the Environment Variables section and add every key your app needs — API keys, database URLs, and secret tokens.
Important: Public vs. Private variables
Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. Never prefix secrets, API keys, or database credentials with NEXT_PUBLIC_ — keep those server-only.
Deploy
Click Deploy. Vercel will clone your repository, install dependencies, run next build, and publish the output to its global edge network. The whole process typically takes 60–120 seconds for a fresh project.
You can watch the build logs in real time. Once complete, Vercel gives you a live URL:
https://your-project-name.vercel.appThat URL is immediately live, globally cached, and served over HTTPS — no extra configuration needed.
Connect a Custom Domain
To use your own domain (e.g. www.yoursite.com) instead of the .vercel.app URL, go to your project's Settings → Domains and add the domain. Vercel will display the DNS records you need:
| Type | Name | Value |
|---|---|---|
| A | @ | 76.76.21.21 |
| CNAME | www | cname.vercel-dns.com |
Once DNS propagates (usually within minutes, up to 48 hours depending on your registrar), your custom domain will serve your app with a free, auto-renewing SSL certificate managed by Vercel.
Continuous Deployment — Automatic from Here
From this point on, every time you push code to your main branch, Vercel automatically triggers a new production deployment. Every other branch or pull request gets its own preview URL so you can test changes before they go live.
Push to main
Triggers an immediate production deploy. Your live site updates automatically.
Open a Pull Request
Vercel creates a unique preview URL for that branch — shareable with teammates or clients.
Rollbacks
Every deployment is saved. One click in the dashboard reverts to any previous version instantly.
Build Logs
Full real-time logs for every deploy. Diagnose failures without leaving the Vercel dashboard.
Deploy via Vercel CLI (Alternative)
If you prefer the terminal over the web dashboard, the Vercel CLI lets you deploy from anywhere in seconds:
npm install -g vercelvercel loginvercelvercel --prodThe CLI walks you through the same setup as the dashboard on first run, then subsequent deploys are a single command.
Common Issues and How to Fix Them
Build fails with "Module not found"
A package is in devDependencies instead of dependencies. Move it, or ensure your build command installs all deps.
Environment variable is undefined at runtime
Did you add it to Vercel's dashboard? Variables in .env.local are not committed to Git and won't be available on Vercel unless added manually.
API routes return 404
Make sure the files live inside app/api/ (App Router) or pages/api/ (Pages Router). Check that you're not accidentally excluding them via .vercelignore.
Images not loading after deploy
If using next/image with external sources, add the hostname to the remotePatterns array in next.config.js. For local images, ensure the path starts from /public/.
"NEXT_PUBLIC_ variable" is undefined in the browser
These variables are baked in at build time. After adding or changing them in the Vercel dashboard, trigger a new deployment — a redeploy is required.
Best Practices for Production
Conclusion
Deploying a Next.js app on Vercel is genuinely one of the most frictionless deployment experiences in modern web development. The Git-based workflow, zero-config Next.js detection, preview deployments, and global edge network make Vercel the go-to choice for teams of all sizes — from solo developers shipping side projects to enterprises running high-traffic applications. Follow this guide once and you will have a workflow you can repeat in under two minutes for every project after that.
