Deploying Next.js to Vercel

Connect Git repository to Vercel

Link GitHub/GitLab/Bitbucket to enable automatic deploys from branches.

Set the production branch in Vercel

Choose the branch Vercel will treat as production (e.g., main or master).

Configure project build settings

Confirm framework preset, build command (next build) and output directory.

Add environment variables in Vercel

Create distinct Production and Preview environments in the Vercel UI or CLI.

Add production environment variables

Store secrets (API keys, DB URLs) as Production vars and mark them as protected.

Add preview environment variables for PRs

Provide safe test keys for Preview deployments; avoid exposing prod secrets.

Allow image domains in next.config.js

Add domains or remotePatterns to images.domains to avoid optimizer errors.

Set ISR revalidate times and cache-control

Configure getStaticProps revalidate or headers for optimal ISR behavior.

Select Edge Function regions in Vercel

Choose regions closest to users for lower latency on Edge Functions.

Add a custom domain to the Vercel project

Enter your domain in Vercel's Domains settings to begin verification.

Verify domain and update DNS records

Add required A/CNAME/TXT records at your registrar and confirm verification.

Configure redirects, rewrites and headers

Implement redirects/rewrites in next.config.js or vercel.json for routing and headers.

Enable Preview Deployments and branch protections

Turn on preview deploys for PRs and protect main to prevent accidental merges.

Integrate analytics (Vercel or third-party)

Enable Vercel Analytics or add GA/Snowplow and set required env keys.

Set up logging and error monitoring

Connect Sentry, Logflare or Vercel logs for runtime error tracking.

Test production build and run smoke tests after deploy

Run next build locally, deploy to production, then check key pages and APIs.

Document rollback and alias strategy

Record how to rollback (revert commit, restore alias) and who owns it.