login
ngxtm

vercel-deployment

by @ngxtm in AI & LLM
0
0
# Install this skill:
npx skills add ngxtm/devkit --skill "vercel-deployment"

Install specific skill from multi-skill repository

# Description

Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production.

# SKILL.md

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

Works well with: nextjs-app-router, supabase-backend

# Related Skills

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚑ Amp πŸš€ Antigravity πŸ€– Claude Code πŸ¦€ Clawdbot πŸ“ Codex ▢️ Cursor πŸ€– Droid πŸ’Ž Gemini CLI πŸ™ GitHub Copilot πŸͺΏ Goose πŸ“Š Kilo Code πŸ”§ Kiro CLI πŸ’» OpenCode 🦘 Roo Code 🌲 Trae πŸ„ Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.