How to Deploy a Next.js App to Vercel

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.

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.

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.

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.

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.

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.