sleestk/skills-pipeline/vercel-developer

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

1. Zero-config for Next.js. Vercel auto-detects Next.js and configures builds, serverless functions, and routing automatically.
2. Git push = deploy. Connect a GitHub/GitLab/Bitbucket repo. Every push to main triggers a production deployment. Every PR gets a preview deployment.
3. Environment variables must be set before deployment. Env vars are baked into the build. If you add one after deploying, you must redeploy.
4. `NEXT_PUBLIC_` prefix exposes to the browser. Without this prefix, env vars are server-only. Never prefix secret keys with NEXT_PUBLIC_.
5. Three environments: Development, Preview, Production. Each can have different env var values.
6. Preview deployments are free and automatic. Every push to a non-production branch creates a preview with a unique URL.
7. Rollbacks are instant. You can roll back to any previous deployment via Dashboard or CLI.
8. Edge Functions run globally. Serverless Functions run in a single region by default.

Quick Start

# 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: