vercel-deployment
Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
npx agent-skills-cli listSkill Instructions
name: vercel-deployment description: "Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production." source: vibeship-spawner-skills (Apache 2.0)
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
More by davila7
View allOpen-source AI observability platform for LLM tracing, evaluation, and monitoring. Use when debugging LLM applications with detailed traces, running evaluations on datasets, or monitoring production AI systems with real-time insights.
High-level PyTorch framework with Trainer class, automatic distributed training (DDP/FSDP/DeepSpeed), callbacks system, and minimal boilerplate. Scales from laptop to supercomputer with same code. Use when you want clean training loops with built-in best practices.
Create professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientific communication. Includes layout design, color schemes, multi-column formats, figure integration, and poster-specific best practices for visual communication.
Extract structured data from LLM responses with Pydantic validation, retry failed extractions automatically, parse complex JSON with type safety, and stream partial results with Instructor - battle-tested structured output library