vercel-deployment
Expert support for deploying Next.js apps to Vercel, focusing on environment configurations, performance, and monitoring.
Install
mkdir -p .claude/skills/vercel-deployment && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/750" && unzip -o skill.zip -d .claude/skills/vercel-deployment && rm skill.zipInstalls to .claude/skills/vercel-deployment
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production.Key capabilities
- →Configure environment variables for Vercel environments
- →Select between Edge and Serverless runtimes
- →Optimize Next.js build sizes and cold starts
- →Manage preview deployments for testing
- →Diagnose CORS and API route deployment errors
How it works
It applies Vercel-specific deployment patterns, runtime selection, and build optimization techniques to Next.js applications.
Inputs & outputs
When to use vercel-deployment
- →Configuring environment variables
- →Choosing between Edge and Serverless
- →Optimizing production build speed
About this skill
Vercel Deployment
You are a Vercel deployment expert. You understand the platform's capabilities, limitations, and best practices for deploying Next.js applications at scale.
Your core principles:
- Environment variables - different for dev/preview/production
- Edge vs Serverless - choose the right runtime
- Build optimization - minimize cold starts and bundle size
- Preview deployments - use for testing before production
- Monitoring - set up analytics and error tracking
Capabilities
- vercel
- deployment
- edge-functions
- serverless
- environment-variables
Requirements
- nextjs-app-router
Patterns
Environment Variables Setup
Properly configure environment variables for all environments
Edge vs Serverless Functions
Choose the right runtime for your API routes
Build Optimization
Optimize build for faster deployments and smaller bundles
Anti-Patterns
❌ Secrets in NEXT_PUBLIC_
❌ Same Database for Preview
❌ No Build Cache
⚠️ Sharp Edges
| Issue | Severity | Solution |
|---|---|---|
| NEXT_PUBLIC_ exposes secrets to the browser | critical | Only use NEXT_PUBLIC_ for truly public values: |
| Preview deployments using production database | high | Set up separate databases for each environment: |
| Serverless function too large, slow cold starts | high | Reduce function size: |
| Edge runtime missing Node.js APIs | high | Check API compatibility before using edge: |
| Function timeout causes incomplete operations | medium | Handle long operations properly: |
| Environment variable missing at runtime but present at build | medium | Understand when env vars are read: |
| CORS errors calling API routes from different domain | medium | Add CORS headers to API routes: |
| Page shows stale data after deployment | medium | Control caching behavior: |
Related Skills
Works well with: nextjs-app-router, supabase-backend
When not to use it
- →When deploying to non-Vercel hosting platforms
Prerequisites
Limitations
- →Requires Next.js App Router
- →Limited to Vercel platform features
How it compares
It provides platform-specific expertise for Vercel, addressing issues like cold starts and environment variable scoping that generic deployment guides miss.
Compared to similar skills
vercel-deployment side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vercel-deployment (this skill) | 3 | 6mo | No flags | Intermediate |
| ideogram-deploy-integration | 1 | 25d | Caution | Intermediate |
| gamma-deploy-integration | 0 | 25d | Review | Intermediate |
| deployment-pipeline-design | 6 | 2mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by davila7
View all by davila7 →You might also like
ideogram-deploy-integration
jeremylongshore
Deploy Ideogram integrations to Vercel, Fly.io, and Cloud Run platforms. Use when deploying Ideogram-powered applications to production, configuring platform-specific secrets, or setting up deployment pipelines. Trigger with phrases like "deploy ideogram", "ideogram Vercel", "ideogram production deploy", "ideogram Cloud Run", "ideogram Fly.io".
gamma-deploy-integration
jeremylongshore
Deploy Gamma-integrated applications to production environments. Use when deploying to Vercel, AWS, GCP, or other cloud platforms with proper secret management and configuration. Trigger with phrases like "gamma deploy", "gamma production", "gamma vercel", "gamma AWS", "gamma cloud deployment".
deployment-pipeline-design
wshobson
Design multi-stage CI/CD pipelines with approval gates, security checks, and deployment orchestration. Use when architecting deployment workflows, setting up continuous delivery, or implementing GitOps practices.
azure-static-web-apps
github
Helps create, configure, and deploy Azure Static Web Apps using the SWA CLI. Use when deploying static sites to Azure, setting up SWA local development, configuring staticwebapp.config.json, adding Azure Functions APIs to SWA, or setting up GitHub Actions CI/CD for Static Web Apps.
vercel-deploy
openai
Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".
genkit-infra-expert
jeremylongshore
Execute use when deploying Genkit applications to production with Terraform. Trigger with phrases like "deploy genkit terraform", "provision genkit infrastructure", "firebase functions terraform", "cloud run deployment", or "genkit production infrastructure". Provisions Firebase Functions, Cloud Run services, GKE clusters, monitoring dashboards, and CI/CD for AI workflows.