Vercel Developer Skill
A comprehensive skill for deploying and managing Next.js applications on Vercel. Covers five domains: Deployment, Environment Variables, Domains & SSL, CLI, and Platform Features.
Architecture
vercel-developer/ ├── SKILL.md ← You are here (orchestrator) ├── references/ │ ├── deployment.md ← Deploy flows (Git, CLI, preview, production) │ ├── environment-variables.md ← Env var management, secrets, per-environment config │ ├── domains-ssl.md ← Custom domains, DNS, SSL certificates │ ├── cli.md ← Full Vercel CLI command reference │ └── platform-features.md ← Storage, caching, functions, integrations
Routing
Deployment
If the request involves deploying an app, Git integration, preview deployments, production deploys, rollbacks, CI/CD, or the deployment pipeline:
→ Read references/deployment.md
Environment Variables
If the request involves setting env vars, the NEXT_PUBLIC_ prefix, secrets management, per-environment configuration (development/preview/production), or pulling env vars locally:
→ Read references/environment-variables.md
Domains & SSL
If the request involves custom domains, DNS configuration, SSL certificates, domain verification, or domain aliases:
→ Read references/domains-ssl.md
CLI
If the request involves Vercel CLI commands (vercel, vercel deploy, vercel env, vercel link, vercel pull, vercel dev, vercel logs, etc.):
→ Read references/cli.md
Platform Features
If the request involves Vercel-specific features like Serverless Functions, Edge Functions, Vercel Blob/KV/Postgres storage, caching (ISR, CDN), Web Application Firewall, Speed Insights, Analytics, or integrations:
→ Read references/platform-features.md
Multiple Domains
Many requests touch multiple domains. For example, "deploy my Next.js + Stripe + Supabase app with a custom domain" requires Deployment + Environment Variables + Domains & SSL. Read all relevant files.
Default Stack
- Framework: Next.js (App Router)
- Deployment target: Vercel
- CLI:
vercel(latest) - Language: TypeScript
Key Principles
- Zero-config for Next.js. Vercel auto-detects Next.js and configures builds, serverless functions, and routing automatically.
- Git push = deploy. Connect a GitHub/GitLab/Bitbucket repo. Every push to
maintriggers a production deployment. Every PR gets a preview deployment. - Environment variables must be set before deployment. Env vars are baked into the build. If you add one after deploying, you must redeploy.
NEXT_PUBLIC_prefix exposes to the browser. Without this prefix, env vars are server-only. Never prefix secret keys withNEXT_PUBLIC_.- Three environments: Development, Preview, Production. Each can have different env var values.
- Preview deployments are free and automatic. Every push to a non-production branch creates a preview with a unique URL.
- Rollbacks are instant. You can roll back to any previous deployment via Dashboard or CLI.
- Edge Functions run globally. Serverless Functions run in a single region by default.
Quick Start
bash# Install CLI npm i -g vercel # Login vercel login # Link your project vercel link # Pull env vars for local dev vercel env pull .env.local # Deploy preview vercel deploy # Deploy to production vercel --prod
Environment Variables for a SaaS Stack
When deploying a Next.js + Supabase + Stripe app, set these in Vercel:
| Variable | Prefix? | Description |
|---|---|---|
NEXT_PUBLIC_SUPABASE_URL | Yes | Supabase project URL (client-safe) |
NEXT_PUBLIC_SUPABASE_ANON_KEY | Yes | Supabase anon key (client-safe) |
SUPABASE_SERVICE_ROLE_KEY | No | Supabase service role (server-only) |
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY | Yes | Stripe publishable key (client-safe) |
STRIPE_SECRET_KEY | No | Stripe secret key (server-only) |
STRIPE_WEBHOOK_SECRET | No | Stripe webhook signing secret |


