# vercel-deployment

A Claude skill that tells your agent how to deploy Next.js to Vercel: env vars per environment, edge vs serverless, build cache.

- skill · `type=skill` · Claude Code · 124 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/vercel-deployment
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/vercel-deployment

## What it does

The skill loads Vercel platform knowledge into your agent for Next.js work. It covers environment variables across dev, preview and production, picking between edge and serverless runtimes, trimming build size, and setting up monitoring. Your agent leans on that when you ask it to sort out a deployment.

There is a section on anti-patterns: secrets sitting in `NEXT_PUBLIC_` variables, one database shared by preview and production, no build cache. A sharp-edges table rates each issue by severity, from leaking secrets to the browser down to stale pages after a deploy.

The skill assumes a `nextjs-app-router` project. On Pages Router or another framework, the runtime and env-var advice needs checking before you apply it. Pairs with `supabase-backend`.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/vercel-deployment
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill vercel-deployment -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/vercel-deployment/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/vercel-deployment/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/vercel-deployment/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/vercel-deployment/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates vercel-deployment
```

2. **Manually: put the files in place**
- File: `.github/skills/vercel-deployment/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/vercel-deployment
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/vercel-deployment/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/vercel-deployment

## When to use it
- split environment variables across dev, preview and production
- decide between edge and serverless for a given API route
- shrink a serverless function and cut cold starts
- test a preview deployment before pushing to production
- trace a secret leaking into the client bundle

## Example prompts
- Check my `next.config.js` and tell me which env vars should differ per environment
- This API route is slow on cold start — move it to edge or keep it serverless?
- Why is the page showing stale data after deploy? Point me at the caching fix

## Similar
- [vercel-deployments](https://affpapa.org/en/nevibecode/skills/vercel-deployments.md) — skill · 316 installs
- [vercel](https://affpapa.org/en/nevibecode/rules/vercel.md) — rule · ★ 3579
- [vercel-development](https://affpapa.org/en/nevibecode/skills/vercel-development.md) — skill · 712 installs
- [nextjs-deployment](https://affpapa.org/en/nevibecode/skills/nextjs-deployment.md) — skill · 3700 installs
- [vercel-optimize](https://affpapa.org/en/nevibecode/skills/vercel-optimize.md) — skill · 111200 installs
- [netlify-development](https://affpapa.org/en/nevibecode/skills/netlify-development.md) — skill · 665 installs

## Other versions with the same name
- [vercel-deployment · sickn33](https://affpapa.org/en/nevibecode/skills/sickn33-vercel-deployment.md) — 1800 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 224 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md