vercel-deployment

Vercel Deployment is a Claude Code reference skill capturing expert knowledge for deploying Next.js applications to Vercel. It solves the problem of getting production Vercel deployments right by consolidating configuration patterns and, importantly, the common mistakes that break deployments or leak secrets, so Claude can guide setup without repeating well-known pitfalls.

The skill documents environment-variable setup across Vercel's development, preview, and production environments, clearly distinguishing public NEXT_PUBLIC_ variables from server-only secrets. It explains choosing between Edge and Serverless runtimes for API routes and middleware, build optimization in next.config.js (standalone output, image remote patterns, bundle analysis, dynamic imports), the preview-deployment workflow with per-PR URLs and deployment protection, and custom-domain setup with DNS records and redirects. A prominent Sharp Edges section flags security-critical hazards: using NEXT_PUBLIC_ for sensitive keys (which inlines them into the browser bundle where anyone can read them), preview deployments accidentally using the production database, and oversized serverless functions causing slow cold starts, each with symptoms, root cause, and a recommended fix.

It targets Next.js developers and teams deploying to Vercel who want production-ready configuration and to avoid secret exposure and environment cross-contamination. This is a security-conscious documentation reference rather than an automation tool: much of its value is defensive guidance about keeping service-role keys, secret keys, database URLs, and JWT secrets out of client bundles and separating preview from production data. It lists nextjs-app-router as a prerequisite skill.