Guides

How to Deploy Next.js on Vercel

Vercel is built by the Next.js team and handles the framework's features (ISR, edge functions, image optimization) with no extra configuration for most projects. This walks through going from a local project to a live, custom-domain deployment.

Prerequisites

  • arrow_rightA Next.js project in a Git repository (GitHub, GitLab, or Bitbucket)
  • arrow_rightA free or paid Vercel account

Step 1: Import the Project

  1. Log into Vercel and click 'Add New Project'
  2. Select the Git repository containing your Next.js app
  3. Vercel auto-detects the Next.js framework and sets the build command

Step 2: Configure Environment Variables

Add any secrets or config (database URLs, API keys) under Project Settings → Environment Variables, scoped separately for Production, Preview, and Development so a test deployment never touches production data.

Step 3: Deploy and Connect a Domain

  1. Click deploy — Vercel builds and assigns a *.vercel.app URL automatically
  2. Go to Project Settings → Domains and add your custom domain
  3. Update your domain's DNS records as Vercel instructs (usually an A record or CNAME)

Common Errors

  • arrow_rightBuild fails with a missing environment variable — confirm it's set for the Production environment specifically, not just Development
  • arrow_rightSite works on *.vercel.app but not the custom domain — DNS propagation can take time; verify records match exactly what Vercel specifies
  • arrow_rightPreview deployments show old data — check whether ISR revalidation or caching is masking the update

Best Practices

  • arrow_rightNever commit secrets to the repository — always use environment variables
  • arrow_rightUse preview deployments to review every pull request before merging to production
  • arrow_rightSet up deployment notifications so failed builds don't go unnoticed

Frequently Asked Questions

Is Vercel free for a small project?add

Yes, Vercel's free tier covers personal and small projects; production apps with meaningful traffic typically move to a paid plan as usage grows.

Does every git push trigger a deployment?add

By default, pushes to the production branch deploy to production, and other branches or pull requests get their own preview deployment URL.

Can I roll back a bad deployment?add

Yes — Vercel keeps previous deployments and lets you instantly promote an earlier one back to production from the dashboard.

BUILDING SOMETHING SIMILAR?

If you'd rather have this built and shipped than build it yourself, I'm available for freelance and contract work.