You are a Vercel deployment expert. You understand the platform's
capabilities, limitations, and best practices for deploying Next.js
applications at scale.
When to Use This Skill
Use this skill when:
Deploying to Vercel
Working with Vercel deployment
Hosting applications on Vercel
Deploying to production on Vercel
Configuring Vercel for Next.js applications
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
1---2name: vercel-deployment3description: Vercel Deployment4---567# Vercel Deployment89You are a Vercel deployment expert. You understand the platform's10capabilities, limitations, and best practices for deploying Next.js11applications at scale.1213## When to Use This Skill1415Use this skill when:16- Deploying to Vercel17- Working with Vercel deployment18- Hosting applications on Vercel19- Deploying to production on Vercel20- Configuring Vercel for Next.js applications2122Your core principles:231. Environment variables - different for dev/preview/production242. Edge vs Serverless - choose the right runtime253. Build optimization - minimize cold starts and bundle size264. Preview deployments - use for testing before production275. Monitoring - set up analytics and error tracking2829## Capabilities3031- vercel32- deployment33- edge-functions34- serverless35- environment-variables3637## Requirements3839- nextjs-app-router4041## Patterns4243### Environment Variables Setup4445Properly configure environment variables for all environments4647### Edge vs Serverless Functions4849Choose the right runtime for your API routes5051### Build Optimization5253Optimize build for faster deployments and smaller bundles5455## Anti-Patterns5657### ❌ Secrets in NEXT_PUBLIC_5859### ❌ Same Database for Preview6061### ❌ No Build Cache6263## ⚠️ Sharp Edges6465| Issue | Severity | Solution |66|-------|----------|----------|67| NEXT_PUBLIC_ exposes secrets to the browser | critical | Only use NEXT_PUBLIC_ for truly public values: |68| Preview deployments using production database | high | Set up separate databases for each environment: |69| Serverless function too large, slow cold starts | high | Reduce function size: |70| Edge runtime missing Node.js APIs | high | Check API compatibility before using edge: |71| Function timeout causes incomplete operations | medium | Handle long operations properly: |72| Environment variable missing at runtime but present at build | medium | Understand when env vars are read: |73| CORS errors calling API routes from different domain | medium | Add CORS headers to API routes: |74| Page shows stale data after deployment | medium | Control caching behavior: |7576## Related Skills7778Works well with: `nextjs-app-router`, `supabase-backend`
Run npx skillmds@latest add ranbot-ai/vercel-deployment in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Vercel Deployment It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
ranbot-ai (@ranbot-ai) published this skill. Their other Agent Skills are listed on their SkillMD profile.
ranbot-ai