vercel-deployment
BeliebtExpert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production.
"Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production."
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.
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
You Might Also Like
Related Skills
create-pr
Creates GitHub pull requests with properly formatted titles that pass the check-pr-title CI validation. Use when creating PRs, submitting changes for review, or when the user says /pr or asks to create a pull request.
n8n-io
electron-chromium-upgrade
Guide for performing Chromium version upgrades in the Electron project. Use when working on the roller/chromium/main branch to fix patch conflicts during `e sync --3`. Covers the patch application workflow, conflict resolution, analyzing upstream Chromium changes, and proper commit formatting for patch fixes.
electron
pr-creator
Use this skill when asked to create a pull request (PR). It ensures all PRs follow the repository's established templates and standards.
google-gemini
clawdhub
Use the ClawdHub CLI to search, install, update, and publish agent skills from clawdhub.com. Use when you need to fetch new skills on the fly, sync installed skills to latest or a specific version, or publish new/updated skill folders with the npm-installed clawdhub CLI.
moltbottmux
Remote-control tmux sessions for interactive CLIs by sending keystrokes and scraping pane output.
moltbot
create-pull-request
Create a GitHub pull request following project conventions. Use when the user asks to create a PR, submit changes for review, or open a pull request. Handles commit analysis, branch management, and PR creation using the gh CLI tool.
cline