From vercel-pack
Sets up Vercel local dev server with vercel dev, pulls env vars, enables hot reload, and tests serverless functions/APIs. For fast local iteration on Vercel projects.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vercel-pack:vercel-local-dev-loopThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Run Vercel serverless functions and API routes locally using `vercel dev`. Covers environment variable management, hot reload, local testing patterns, and framework-specific dev servers.
Run Vercel serverless functions and API routes locally using vercel dev. Covers environment variable management, hot reload, local testing patterns, and framework-specific dev servers.
vercel-install-auth setupvercel link# Pull env vars from Vercel to local .env files
vercel env pull .env.development.local
# This creates .env.development.local with all Development-scoped vars:
# VERCEL="1"
# VERCEL_ENV="development"
# DATABASE_URL="postgres://..."
# API_SECRET="sk-..."
# vercel dev starts a local server that emulates the Vercel platform
vercel dev
# Output:
# Vercel CLI 39.x.x — dev command
# > Ready on http://localhost:3000
# With a specific port
vercel dev --listen 8080
# With debug logging
vercel dev --debug
vercel dev provides:
/api/* routesvercel.json rewrites, redirects, and headers applied locally.env*.local files# Test your API route
curl http://localhost:3000/api/hello
# {"message":"Hello from Vercel Serverless Function!"}
# Test with POST body
curl -X POST http://localhost:3000/api/users \
-H "Content-Type: application/json" \
-d '{"name":"test","email":"[email protected]"}'
# Test with query parameters
curl "http://localhost:3000/api/search?q=vercel&limit=10"
For frameworks with their own dev server, use those instead of vercel dev:
# Next.js — built-in Vercel compatibility
npx next dev
# API routes at pages/api/* or app/api/* work identically
# Nuxt
npx nuxi dev
# SvelteKit
npm run dev
# Astro
npx astro dev
The framework dev servers handle API routes natively. Use vercel dev only for plain serverless function projects without a framework.
# Add a new env var for development only
vercel env add MY_VAR development
# Prompts for value, stores encrypted on Vercel
# List all env vars
vercel env ls
# Remove an env var
vercel env rm MY_VAR development
# Pull updated vars after changes
vercel env pull .env.development.local
// api/__tests__/hello.test.ts
import { describe, it, expect, vi } from 'vitest';
// Mock the Vercel request/response
function createMockReq(overrides = {}) {
return { method: 'GET', query: {}, body: null, ...overrides };
}
function createMockRes() {
const res: any = {};
res.status = vi.fn().mockReturnValue(res);
res.json = vi.fn().mockReturnValue(res);
res.send = vi.fn().mockReturnValue(res);
return res;
}
describe('GET /api/hello', () => {
it('returns 200 with message', async () => {
const handler = (await import('../hello')).default;
const req = createMockReq();
const res = createMockRes();
handler(req, res);
expect(res.status).toHaveBeenCalledWith(200);
expect(res.json).toHaveBeenCalledWith(
expect.objectContaining({ message: expect.any(String) })
);
});
});
.env File HierarchyVercel loads environment files in this order (later files override earlier):
| File | Environment | Git |
|---|---|---|
.env | All | Commit |
.env.local | All (local only) | Ignore |
.env.development | Development | Commit |
.env.development.local | Development (local only) | Ignore |
.env files| Error | Cause | Solution |
|---|---|---|
vercel dev hangs on start | Port already in use | Kill the process on port 3000 or use --listen 8080 |
Error: No framework detected | Missing package.json or framework | Add a build framework or use plain functions in api/ |
| Env var undefined locally | Not pulled from Vercel | Run vercel env pull .env.development.local |
FUNCTION_INVOCATION_TIMEOUT | Function exceeds 10s locally | Check for unresolved promises or infinite loops |
TypeScript errors in api/ | Missing @vercel/node types | npm install --save-dev @vercel/node |
Proceed to vercel-sdk-patterns for production-ready REST API integration patterns.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin vercel-packCreates and deploys minimal Vercel project with static HTML page calling TypeScript serverless API route. Verifies CLI auth, structure, and pipeline via preview deploy and curl tests.
Guides Vercel CLI (vercel/vc) for deploying projects, linking repos, managing env vars/domains, viewing logs/metrics from command line. Activates on vercel commands or deployment queries.
Provides expert guidance for deploying Next.js applications on Vercel, including environment variable setup, edge vs. serverless function decisions, and build optimization.