Step-by-step

1
Push your project to GitHub

Vercel deploys from a Git repository. If your project is not on GitHub yet, initialise a repo and push it. Vercel also supports GitLab and Bitbucket, but GitHub gives you the tightest integration (automatic preview deploys on pull requests, deploy status checks).
bash
```
git init
git add -A
git commit -m "initial commit"
gh repo create my-next-app --public --push
# or use the GitHub web UI to create the repo, then:
# git remote add origin https://github.com/you/my-next-app.git
# git push -u origin main
```
2
Import the project on Vercel

Go to vercel.com/new, click Import Git Repository, and authorise the GitHub app. Vercel will detect the framework automatically — you should see Next.js under the Framework Preset. The build command (next build) and output directory (.next) are set for you. You do not need to change them.
Alternatively, use the CLI for a terminal-only flow:
bash
```
npm i -g vercel
vercel
# Follow the prompts:
# ? Set up and deploy "my-next-app"? Y
# ? Which scope? (your username or team)
# ? Link to existing project? N
# ? What's your project's name? my-next-app
# ? In which directory is your code located? ./
# ✓ Detected Next.js — overrides applied automatically
```
3
Set environment variables
Never commit a .env.local file. Instead, add every variable in the Vercel dashboard under Settings → Environment Variables. Vercel lets you scope each variable to three environments separately:
- Production — the main branch deploy
- Preview — every other branch and pull request
- Development — pulled down via vercel env pull
Pull the variables to your local .env.local file without typing them by hand:
bash
```
vercel env pull .env.local
# Creates .env.local with Development-scoped variables
# .env.local is gitignored by default in Next.js — keep it that way
```
4
Deploy to preview vs production

Running vercel (no flags) creates a preview deployment — a unique URL like my-next-app-abc123.vercel.app that is not aliased to your production domain. This is safe for testing.
Running vercel --prod deploys to your production domain. Pushing to the main branch via Git also triggers a production deploy automatically.
bash
```
# Preview deploy (unique URL, not production)
vercel

# Production deploy (maps to your domain)
vercel --prod

# Or just push to main — Vercel CI does it for you
git push origin main
```
5
Connect a custom domain
In the Vercel dashboard, go to your project → Settings → Domains → add your domain. Vercel will show you one of two DNS record options:
- CNAME — point a subdomain (www) to cname.vercel-dns.com
- A record — point the apex domain (@) to 76.76.21.21
Add both if you want example.com and www.example.com to work. Vercel provisions a Let's Encrypt TLS certificate automatically once DNS propagates (usually under 10 minutes).
6

Understand automatic preview deploys

Every time you open a pull request against main, Vercel builds the branch and posts a unique preview URL as a PR comment. Reviewers can visit the live preview without pulling the branch locally.
Preview deployments use Preview-scoped environment variables, so they can point to a staging database instead of production. This is the main reason to scope env vars separately.
7
Fix common build failures
Most first-deploy failures fall into two categories:
- Missing environment variable — the build reads process.env.SOME_KEY and gets undefined. Add the variable in the dashboard (Production scope) and redeploy.
- Wrong Node.js version — Vercel defaults to the Node version in your package.json engines field. If that field is missing, pin it explicitly or set it in the dashboard under Settings → General → Node.js Version.
json
```
// package.json — pin your Node version
{
  "engines": {
    "node": ">=20.0.0"
  }
}
```
8
Check build output and logs

Every deployment has a full build log in the Vercel dashboard under Deployments → (select deploy) → Build Logs. If the deploy succeeds but the site behaves unexpectedly at runtime, check Functions → Logs for server-side errors. You can also tail logs from the CLI:
bash
```
# Stream runtime logs for the production deployment
vercel logs my-next-app --follow

# Inspect a specific deployment URL
vercel inspect https://my-next-app-abc123.vercel.app
```

Tips & gotchas

Use Vercel's "Instant Rollback" feature in the dashboard to revert to any previous deployment in one click — no Git revert needed.
Set a different DATABASE_URL for Preview environments pointing to a staging or branch database so pull requests never touch production data.
The `vercel.json` file lets you configure redirects, rewrites, headers, and edge function regions — useful for custom routing that goes beyond Next.js config.
If you use a monorepo, set the Root Directory in Vercel to the Next.js package folder so the build runs from the right location.

Wrapping up

Vercel removes almost all the infrastructure overhead from deploying Next.js. The combination of automatic preview deploys, per-environment variables, and zero-config framework detection means you can go from a local project to a production URL in under five minutes. Once the Git integration is in place, every push to main is a deploy — no manual steps required.

#Next.js #Vercel #Deployment

Back to all guides

How to Deploy a Next.js App to Vercel

Step-by-step

Push your project to GitHub

Import the project on Vercel

Set environment variables

Deploy to preview vs production

Connect a custom domain

Understand automatic preview deploys

Fix common build failures

Check build output and logs

Tips & gotchas

Wrapping up

Related guides

How to Deploy a Laravel App to a VPS (Apache + MySQL)

How to Add Multilingual Support to a Laravel App

How to Send Transactional Emails in Laravel

Need Help With Your Project?