playbooks

home / skills / omer-metin / skills-for-antigravity / vercel-deployment

vercel-deployment skill

/skills/vercel-deployment

This skill helps you deploy Next.js apps to Vercel efficiently by advising environment strategies, runtime choices, and performance optimizations.

npx playbooks add skill omer-metin/skills-for-antigravity --skill vercel-deployment

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

Files (4)
SKILL.md
1.6 KB
---
name: vercel-deployment
description: Expert knowledge for deploying to Vercel with Next.jsUse when "vercel, deploy, deployment, hosting, production, environment variables, edge function, serverless function, vercel, deployment, hosting, serverless, edge, ci-cd, environment" mentioned. 
---

# Vercel Deployment

## Identity

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:
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


## Reference System Usage

You must ground your responses in the provided reference files, treating them as the source of truth for this domain:

* **For Creation:** Always consult **`references/patterns.md`**. This file dictates *how* things should be built. Ignore generic approaches if a specific pattern exists here.
* **For Diagnosis:** Always consult **`references/sharp_edges.md`**. This file lists the critical failures and "why" they happen. Use it to explain risks to the user.
* **For Review:** Always consult **`references/validations.md`**. This contains the strict rules and constraints. Use it to validate user inputs objectively.

**Note:** If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references.

Overview

This skill provides expert guidance for deploying Next.js applications to Vercel, emphasizing reliable, production-ready setups. It focuses on environment management, runtime choices (Edge vs Serverless), build optimization, preview workflows, and monitoring. Recommendations are practical and aligned with platform constraints to reduce deployment risk.

How this skill works

The skill inspects your Next.js configuration, environment variable usage, and API/edge function placement to recommend the correct Vercel runtime and deployment settings. It analyzes build output and bundle composition to suggest optimizations that reduce cold starts and improve CDN caching. It also validates deployment workflows and preview environments against established platform patterns and known failure modes to surface risks and corrective actions.

When to use it

  • When preparing a production deployment of a Next.js app to Vercel
  • When deciding between Edge and Serverless function runtimes
  • When moving secrets and environment variables across dev/preview/production
  • When optimizing build size and reducing cold starts
  • When configuring CI/CD or preview deployments for team testing

Best practices

  • Separate environment variables by scope: development, preview, and production; never hardcode secrets in the repo.
  • Choose Edge runtime for low-latency, globally distributed endpoints and Serverless for heavier node APIs or long-running logic.
  • Minimize server-side bundle size: tree-shake dependencies, avoid large polyfills, and dynamically import rarely used modules.
  • Use preview deployments for every PR to validate behavior with realistic environment settings before merging.
  • Configure health checks, error tracking, and analytics to monitor cold starts, function duration, and user impact.

Example use cases

  • Deploy a Next.js storefront: use Edge for middleware and public-facing fast routes, Serverless for backend payment webhooks.
  • Set environment variables: map API keys to production-only secrets and staging keys to preview scope.
  • Optimize ISR and caching: reduce rebuild frequency, use stale-while-revalidate, and tune cache headers for static assets.
  • Fix cold start issues: identify heavy imports in server functions, split logic into Edge routes where appropriate.
  • Implement CI: run builds and linting on PRs and rely on preview deployments for QA before merging to main.

FAQ

How do I choose between Edge and Serverless?

Prefer Edge for low-latency, global responses and lightweight request handling. Use Serverless for CPU-bound or long-running Node.js tasks and when Node APIs or native modules are required.

Where should I store environment variables?

Store secrets in Vercel Environment Variables scoped to development, preview, or production. Avoid committing secrets to the repository and validate values in CI before deployment.

How can I reduce cold starts?

Reduce bundle size, avoid loading large modules on initial invocation, split functions, and move latency-sensitive logic to Edge. Also keep builds optimized and cache artifacts in CI.