Next.js Guide
How to Deploy Next.js to Vercel
Vercel is the platform built by the creators of Next.js. Zero-config deploys, edge network, automatic HTTPS. Your app goes live in under 5 minutes.
Quick answer: Push your code to GitHub, sign up at vercel.com with GitHub, click Add New → Project, import your repo, add environment variables, and click Deploy. Every future push auto-deploys.
📋 What You'll Need
- A Next.js project (see our Create a Next.js App guide)
- A GitHub account
- A Vercel account (free, sign up with GitHub)
- 5 minutes
✅ Vercel's Hobby plan is free forever for personal projects.
Push Your Project to GitHub
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/USERNAME/REPO.git
git push -u origin mainMake sure .env.local is in .gitignore. Never commit secrets.
Import to Vercel
- Go to vercel.com and click Sign Up
- Choose Continue with GitHub
- From the dashboard, click Add New → Project
- Find your repo in the list and click Import
Vercel auto-detects Next.js and fills in the build settings. Leave the defaults.
Add Environment Variables
Before clicking Deploy, expand the Environment Variables section. Add everything from your .env.local:
DATABASE_URL=postgres://...
AUTH_SECRET=your-production-secret
AUTH_GITHUB_ID=...
AUTH_GITHUB_SECRET=...
OPENAI_API_KEY=sk-...💡 Tip: Vercel stores environment variables securely. They're available as process.env.KEY at build time and runtime.
Deploy
Click the blue Deploy button. Vercel:
- Clones your repo
- Installs dependencies
- Builds your Next.js app
- Deploys to the global edge network
- Gives you a URL like
your-project.vercel.app
First deploy takes 1–3 minutes. Every push after that takes 30–60 seconds.
Add a Custom Domain
- Project → Settings → Domains
- Click Add and enter your domain
- Vercel shows DNS records to add at your registrar
- Add the records and wait 5–60 minutes for propagation
- Vercel auto-issues an SSL certificate
See our Free Domain guide for cheap domain options.
CLI Deployment (Alternative)
Prefer the terminal? Install the Vercel CLI:
npm install -g vercel
# From your project root:
vercel # deploy to preview
vercel --prod # deploy to productionThe CLI is useful for CI pipelines and when you want to build locally before uploading:
vercel build
vercel deploy --prebuilt⚡ Free Plan Limits (2026)
| Resource | Hobby (Free) | Pro ($20/mo) |
|---|---|---|
| Bandwidth | 100 GB/mo | 1 TB/mo |
| Builds | Unlimited | Unlimited |
| Serverless functions | 100 GB-hrs | 1000 GB-hrs |
| Custom domains | Unlimited | Unlimited |
| SSL | Free | Free |
| Edge network | Global | Global |
| Commercial use | No | Yes |
For personal projects, the free tier is generous. Switch to Pro when you launch commercially.
🔧 Troubleshooting
- Build fails: Check your
package.jsonhas abuildscript. Vercel runsnpm run buildby default. - Missing environment variable: Add it in Settings → Environment Variables and redeploy.
- Wrong Node version: Add
"engines": { "node": "20.x" }to package.json. - 404 on client routes: Next.js handles routing — check your
app/folder structure. - Slow builds: Enable Turbopack in
next.config.jsfor faster builds.
❓ Frequently Asked Questions
Is Vercel free for Next.js?
;Yes for personal projects — 100GB bandwidth, unlimited deploys, SSL, and global CDN. Commercial use requires Pro.
How long does a deploy take?
First deploy: 1–3 minutes. Subsequent deploys: 30–60 seconds, thanks to caching.
Does Vercel auto-deploy?
Yes. Every push to main deploys to production. Pull requests get their own preview URLs.
Can I deploy elsewhere?
Yes — Netlify, Railway, or any Node.js host. But Vercel is the recommended choice because it's built by the Next.js team.
How do I set environment variables?
Project → Settings → Environment Variables. Add each key and value, then redeploy.