GuidesApril 15, 20266 min read

How to Deploy a Next.js App to Vercel (Complete 2026 Guide)

The definitive guide to deploying Next.js on Vercel: Git integration, environment variables, custom domains, preview deployments, and production checklist.

Deploying a Next.js app to Vercel is the simplest path from code to production in 2026. Here's the complete walkthrough — from Git push to live URL with a custom domain.

Prerequisites

  • A Next.js project (exported from InBuild or built from scratch)
  • A GitHub, GitLab, or Bitbucket account with the project pushed
  • A Vercel account (free to create)

Step 1: Import the project

Go to vercel.com → New Project → Import your Git repository. Vercel auto-detects the Next.js framework and configures build settings.

Step 2: Set environment variables

In the project settings, add your environment variables before the first deploy. Common ones:

  • DATABASE_URL — your Postgres connection string
  • NEXT_PUBLIC_APP_URL — your production domain (e.g. https://yourdomain.com)
  • JWT_SECRET — for authentication
  • ANTHROPIC_API_KEY — if using Claude for AI features

Step 3: Deploy

Click Deploy. Vercel runs next build, creates serverless functions for dynamic routes, and deploys static assets to its global CDN. First deploy takes 30–60 seconds.

Step 4: Custom domain

Project → Settings → Domains → Add. Enter your domain. Vercel shows the DNS records to configure at your registrar (usually a CNAME to cname.vercel-dns.com). SSL is provisioned automatically within minutes.

Step 5: Production checklist

  • Verify NEXT_PUBLIC_APP_URL matches your production domain
  • Test sitemap.xml at yourdomain.com/sitemap.xml
  • Test robots.txt at yourdomain.com/robots.txt
  • Submit sitemap to Google Search Console
  • Test OG images with Facebook Debugger
  • Run PageSpeed Insights on mobile
  • Verify all forms submit correctly with production API keys

Ongoing: auto-deploys

Every push to main triggers a production deploy. Every push to a branch creates a preview deployment with its own URL. This is the Vercel workflow — ship fast, preview everything, merge when ready.

Frequently asked questions

Is Vercel free?

The Hobby plan is free for personal projects. Pro starts at $20/month for commercial use and teams. Most solo developers and small projects stay on Hobby until they need team features or commercial use.

Do I have to use Vercel for Next.js?

No. Next.js runs on any Node.js host — Netlify, Railway, Render, AWS, self-hosted. Vercel is the default because it's built by the same team and has the deepest integration, but it's not required.

How do I set up a custom domain?

In the Vercel dashboard: Project → Settings → Domains → Add your domain. Update your DNS records (CNAME or A record) at your registrar. SSL is automatic. Takes 5 minutes.

Ready to build?

Turn your next idea into a production-ready app in minutes.

Keep reading