Vercel Production Deployment Checklist for Next.js Apps
A production deployment checklist for Next.js apps on Vercel — environment variables, domain setup, edge config, caching headers, monitoring, and rollback readiness.
Preview deployments work. The dev environment is clean. Now you are shipping to production, and the gap between "works in preview" and "reliable under real traffic" is wider than it looks. A Vercel production deployment for a Next.js application involves more than merging to main — environment configuration, caching strategy, observability, and rollback capability all determine whether your launch goes smoothly or becomes an incident.
Use this checklist before every significant production deployment.
Environment Configuration
-
Separate environment variable scopes. Vercel's project settings distinguish between Development, Preview, and Production environments. Confirm that production secrets — database URLs, API keys, third-party credentials — are scoped to Production only and not leaking into Preview deployments where they could be exposed to broader team access.
-
Audit every
NEXT_PUBLIC_variable. These are embedded in client-side JavaScript bundles and visible to anyone who inspects your site. They should contain only non-sensitive configuration: public API endpoints, analytics IDs, feature flag keys. Never put secrets inNEXT_PUBLIC_variables. -
Verify environment variables are set before deploying. A missing environment variable in production causes runtime errors, not build errors. After setting variables, trigger a fresh deployment and confirm the build log and function logs show no missing variable warnings.
-
Use Vercel Environment Variable Groups for shared config. If you manage multiple projects with shared variables, Environment Variable Groups centralize them and reduce configuration drift between projects.
Domain and DNS
-
Add your custom domain before announcing the deployment. DNS propagation can take up to 48 hours for initial setup, though it typically completes in under an hour. Do not schedule launches for immediately after DNS changes.
-
Verify SSL certificate provisioning. Vercel provisions Let's Encrypt certificates automatically, but this requires your DNS to point to Vercel's edge network first. Check that the certificate shows as valid in the Vercel dashboard before sending traffic.
-
Set up
wwwto apex redirects (or vice versa). Decide on your canonical domain and configure the other variant to redirect. Split traffic betweenwwwand apex fragments your SEO equity. -
Check redirect rules in
vercel.json. If you have existing redirect or rewrite rules, verify they behave correctly in production. Redirect rules that worked in preview against a non-production base URL may produce unexpected behavior with your actual domain.
Caching and Headers
-
Review
Cache-Controlheaders for API routes. By default, Next.js API routes are not cached. If your API routes return data that is safe to cache (public, not user-specific), add appropriateCache-Controlheaders. If they return user-specific data, confirm caching is disabled. -
Audit Next.js
fetchcaching behavior. In Next.js App Router,fetchcalls are cached by default withforce-cache. Routes that should return fresh data on each request need{ cache: 'no-store' }or{ next: { revalidate: 0 } }explicitly set. -
Set correct revalidation periods for ISR pages. Incremental Static Regeneration pages serve stale content until the revalidation period expires. Confirm that your
revalidatevalues match how frequently the underlying data actually changes. -
Test CDN cache behavior before launch. Use
curl -Iagainst your production URL and checkx-vercel-cacheheaders.HITmeans the response was served from cache;MISSorBYPASSmeans it was not. Confirm the caching behavior matches your intent for each route type.
Performance
-
Run Lighthouse on your production URL, not localhost. Lighthouse scores against localhost miss network latency, server response time, and CDN behavior. Run it against the actual production domain after DNS is live.
-
Verify image optimization is working. Next.js
Imagecomponent should serve optimized, correctly-sized images. Check the Network tab in DevTools — images should be served as WebP where the browser supports it and at dimensions appropriate for the display size. -
Check bundle size. Run
next buildand review the output. Pages with unexpectedly large JavaScript bundles may indicate an import that belongs in a dynamic import or a server component rather than a client component. -
Test on a slow connection. Chrome DevTools Network throttling to "Slow 4G" reveals loading experience issues that fast office internet conceals.
Observability and Monitoring
-
Enable Vercel Analytics. Real User Monitoring data from Vercel Analytics surfaces Core Web Vitals per page in production. This is where you discover that the marketing landing page has a poor LCP or that the dashboard has layout shifts.
-
Enable Vercel Log Drain to your preferred logging destination. Vercel's built-in function logs are retained for a limited period. If your application logs are critical for debugging production issues, drain them to a persistent destination (Datadog, Logtail, Axiom, or similar).
-
Set up uptime monitoring on your primary endpoints. An external monitor (Checkly, BetterUptime, or AWS CloudWatch Synthetics) provides confirmation that your site is reachable from outside Vercel's infrastructure. Internal health checks alone do not catch DNS or CDN issues.
-
Create a Slack or PagerDuty alert for 5xx spikes. Vercel allows webhook-based deployment notifications. Pair that with your logging destination's alerting to create a signal when error rates exceed a threshold.
Rollback Readiness
-
Know your rollback procedure before you need it. Vercel keeps a deployment history. The prior production deployment can be promoted back to production in under a minute from the dashboard. Walk through this procedure before your first significant launch so it is not a learning exercise during an incident.
-
Use Preview deployments for final verification. Vercel's Preview deployment URL is identical to production in every way except the domain. Verify the specific changes you are shipping against the Preview URL before promoting to production.
-
Notify stakeholders before and after deployment. Production deployments should not be silent events. A brief message in a shared channel before and after the deployment gives your team context if something goes wrong in the following hour.
After Launch
-
Watch error rates for the first 30 minutes. Most deployment-related issues surface in the first half-hour of real traffic. Stay available and watch function logs and your uptime monitor.
-
Confirm analytics and tracking are firing correctly. Check that your analytics events, conversion tracking, and any A/B testing tools are capturing data as expected in production. Preview environments often have different behavior for third-party tracking scripts.
-
Document anything that required a manual step. If you had to manually set a header, modify a configuration, or contact support to resolve an issue, document it. The next deployment should have that step in the checklist.
Production readiness is a discipline, not a checklist you complete once. The most reliable Vercel deployments happen when this review is part of every deployment cycle, not a special event before major launches.
If you are building on Vercel and need a team that treats infrastructure as seriously as product code, talk to Clixo. We ship production-grade Next.js systems with the operational practices to back them up.