playbooks

home / skills / sickn33 / antigravity-awesome-skills / vercel-deployment

vercel-deployment skill

/skills/vercel-deployment

This skill helps you deploy Next.js apps on Vercel efficiently by optimizing environment handling, runtimes, and preview workflows.

This is most likely a fork of the vercel-deployment skill from xfstudio
npx playbooks add skill sickn33/antigravity-awesome-skills --skill vercel-deployment

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.3 KB
---
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)
risk: safe
---

# 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:
1. Environment variables - different for dev/preview/production
2. Edge vs Serverless - choose the right runtime
3. Build optimization - minimize cold starts and bundle size
4. Preview deployments - use for testing before production
5. 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`

Overview

This skill provides expert guidance for deploying Next.js applications to Vercel, focusing on reliable, secure, and performant production deployments. It encapsulates best practices for environment configuration, runtime selection, build optimization, and monitoring. Use it to avoid common deployment pitfalls and to scale Next.js apps on Vercel with confidence.

How this skill works

The skill inspects project configuration and deployment choices, advising on environment variable scoping, runtime selection (Edge vs Serverless), and build settings to minimize cold starts and bundle size. It highlights anti-patterns, maps critical issues to concrete fixes, and recommends monitoring and preview deployment workflows. It also surfaces compatibility checks for Next.js App Router and Vercel edge limitations.

When to use it

  • When preparing a Next.js App Router project for production on Vercel
  • When choosing between Edge and Serverless runtimes for API routes
  • When configuring environment variables for dev, preview, and production
  • When optimizing builds to reduce cold starts and bundle size
  • When setting up preview deployments and separate databases for testing

Best practices

  • Separate environment variables per environment; never expose secrets with NEXT_PUBLIC_
  • Prefer Edge runtime for low-latency, small handlers; use Serverless for Node APIs needing full Node APIs
  • Keep serverless bundles small and cache builds to speed deployments
  • Use preview deployments for testing and configure separate databases for preview vs production
  • Enable analytics and error tracking; add health checks and timeouts for long-running jobs

Example use cases

  • Audit a Next.js project to ensure secrets are not exposed and env vars are correctly scoped
  • Recommend runtime changes for API routes to improve latency or compatibility
  • Optimize next.config and bundling to reduce deployment size and cold starts
  • Set up preview deployments with separate database connections and migration strategy
  • Create a monitoring plan with logs, error reporting, and cache-control rules

FAQ

Can I use NEXT_PUBLIC_ for any environment variable?

No. NEXT_PUBLIC_ exposes values to the browser. Only use it for values that are safe to be public, such as feature flags that carry no secrets.

When should I choose Edge over Serverless?

Choose Edge for low-latency, lightweight handlers that run on V8 isolates. Use Serverless when you need full Node APIs or heavier packages that require Node runtime compatibility.

How do I avoid cold starts and large function sizes?

Trim dependencies, use dynamic imports, move heavy logic to background jobs, and leverage build caching. Keep API handlers focused and small.