How to Deploy a Next.js App to Vercel
The complete guide to deploying your Next.js app to Vercel. Environment variables, custom domains, build configuration, and common pitfalls.
Why Vercel for Next.js
Vercel built Next.js, so the integration is seamless. Zero-configuration deployments, automatic previews for pull requests, edge functions, and built-in analytics. For most Next.js apps, Vercel is the fastest path from code to production.
Prerequisites
Your code in a GitHub, GitLab, or Bitbucket repository. A Vercel account (free tier works for most projects). All environment variables documented. A successful local build — run `next build` and fix any errors before deploying.
Step-by-step deployment
Sign in to Vercel and click 'Import Project.' Select your repository. Vercel auto-detects Next.js and configures the build. Add your environment variables in the project settings — every value from .env.local needs to be set here. Click deploy. Vercel builds your app and assigns a URL. Set up your custom domain in project settings and update your DNS records.
Environment variables
The #1 cause of failed deployments is missing environment variables. In Vercel's dashboard, go to Settings > Environment Variables. Add every key from your .env.local file. NEXT_PUBLIC_ prefixed variables are exposed to the browser — only use this prefix for values that are safe to be public (like a Supabase anon key). Server-only secrets (database URLs, API keys) should NOT have the NEXT_PUBLIC_ prefix.
Custom domain and SSL
In your Vercel project, go to Settings > Domains. Add your domain. Vercel provides the DNS records to configure at your registrar. SSL is automatic — Vercel provisions and renews certificates for you. Set up both www and non-www versions and choose which one to redirect to.
Common deployment errors
Build failures from TypeScript errors that your IDE didn't catch (Vercel uses stricter settings). Missing dependencies that work locally because they're globally installed. Environment variables that reference localhost. Dynamic imports that fail at build time. ISR pages that need a database connection during build.
Need help with this?
Our team handles deploy & ship for AI-built apps every day. Get a fixed quote within 24 hours.
Start with a self-serve audit
Get a professional review of your app at a fixed price.
Security Scan
Black-box review of your public-facing app. No code access needed.
- OWASP Top 10 checks
- SSL/TLS analysis
- Security headers
- Expert review within 24h
Code Audit
In-depth review of your source code for security, quality, and best practices.
- Security vulnerabilities
- Code quality review
- Dependency audit
- AI pattern analysis
Complete Bundle
Both scans in one package with cross-referenced findings.
- Everything in both products
- Cross-referenced findings
- Unified action plan
100% credited toward any paid service. Start with an audit, then let us fix what we find.
Related guides
Production Readiness Checklist for AI-Built Apps
The complete checklist before launching any AI-generated app.
Environment Variables Explained for Non-Technical Founders
What environment variables are, why they matter, and how to set them up correctly.
How to Deploy a React App to Netlify
Deploy your Vite or Create React App project to Netlify.
Related technologies
Need help with your app?
Tell us about your project. We'll respond within 24 hours with a clear plan and fixed quote.