A curated, opinionated path for shipping a Next.js app on Vercel - deploys, env, AI Gateway, rendering & caching, firewall, and performance.
Sequences the modern Vercel surface into one ship-a-Next.js-app workflow rather than a pile of disconnected tips. Run the deploy pipeline (preview→production, rollbacks, rolling releases, CI), manage environment variables and OIDC across environments, route every model call through the AI Gateway, pick the right rendering and caching strategy on Fluid Compute (ISR/PPR, Next.js Cache Components, runtime cache), lock the app down with the WAF and BotID, and tune Core Web Vitals. Authored against current Vercel docs (Edge Functions are deprecated, Node 24 default, 300s timeouts, vercel.ts config) and bundled with the catalog's Next.js App Router and Web Performance skills.
Click to play with sound.
Arranged in the author's recommended order. Walk through them in sequence, or open any one on its own.
Ship a Next.js app to Vercel the production way: promote a tested preview to production, instant-rollback a bad release, build once with --prebuilt, run a staged/canary rollout with Rolling Releases (GA), and wire the deploy into CI.
Manage environment variables across Vercel environments and keep local .env in sync – vercel env pull/add/rm/ls, per-environment values (development/preview/production + custom), sensitive secrets, OIDC tokens for keyless cloud access.
Route every LLM call through one unified API on Vercel – plain "provider/model" strings via the AI SDK, automatic provider routing and model fallbacks, observability and per-key cost tracking, and zero data retention.
Choose a rendering, runtime, and caching strategy on Vercel – Fluid Compute as the default runtime (Edge Functions are deprecated), ISR/PPR, Next.js 16 Cache Components ('use cache', cacheLife, cacheTag, updateTag, revalidateTag).
Harden a Vercel app at the platform edge – the Vercel WAF (custom rules, IP blocking, managed rulesets like OWASP CRS + bot_protection + ai_bots, rate limiting), Attack Challenge Mode, system bypass rules, automatic DDoS mitigation.
Diagnose and fix Core Web Vitals and page performance of a Next.js app on Vercel – measurement-first.
Builds and reviews Next.js App Router code – server/client component boundaries, data fetching, caching and revalidation choices, streaming with Suspense, and Server Action mutations – and delivers routes where every dynamic-vs-cached decision is explicit.
Diagnoses and fixes Core Web Vitals – LCP, INP, and CLS – through an ordered audit procedure with concrete code-level changes for images, fonts, JavaScript, and third-party scripts.