Deploying Next.js Applications on Vercel

# Deploying Next.js Applications on Vercel Vercel is built by the creators of Next.js, so deployment is close to zero-configuration for most projects — but a few details matter for a smooth production setup. ## Connecting a Repository Pushing a Next.js project to GitHub and importing it into Vercel is usually enough to get a working deployment — Vercel auto-detects the framework and build settings. ## Environment Variables Variables prefixed with `NEXT_PUBLIC_` are exposed to the browser; everything else stays server-only. Set these in the Vercel dashboard per environment (Production, Preview, Development) rather than committing them to the repo. ``` NEXT_PUBLIC_API_URL=https://api.example.com DATABASE_URL=postgres://... ``` ## Preview Deployments Every pull request automatically gets its own deployment URL, letting you review changes live before merging — a major advantage over manually staging builds. ## Build Settings Vercel typically detects the correct build command (`next build`) automatically, but monorepos or custom output directories may need manual configuration in `vercel.json`. ## Common Gotchas - Forgetting to add environment variables to the Production environment specifically, not just Preview. - API routes with long-running operations hitting serverless function timeout limits. - Using Node.js-only packages inside Edge Runtime functions, which have a more limited runtime. ## Custom Domains Adding a custom domain is handled entirely through the dashboard, with automatic SSL certificate provisioning — no manual certificate management needed. ## Conclusion Vercel removes most deployment complexity for Next.js apps, but understanding environment variable scoping and function limits prevents the most common production surprises.