Deploying Next.js to Vercel

17 items · Web Development · Medium difficulty · 45 min

Deploy your Next.js app to Vercel with confidence—step-by-step checklist.

• 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.

Printed from TickYouOff — the interactive version tracks your progress and can be shared with others.