vercel-local-dev-loop

Configure Vercel local development with vercel dev, environment variables, and hot reload. Use when setting up a development environment, testing serverless functions locally, or establishing a fast iteration cycle with Vercel. Trigger with phrases like "vercel dev setup", "vercel local development", "vercel dev environment", "develop with vercel locally".

Zur Installation springen

Repository: jeremylongshore/tons-of-skills-marketplace
Letzte Quellaktivität: 19. August 2026 um 12:13
Erkannte Sprache von SKILL.md: Englisch
Sterne: 2.677
Forks: 392

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

Zurück zur Suche Zurück zur Installation

name	vercel-local-dev-loop
description	Configure Vercel local development with vercel dev, environment variables, and hot reload. Use when setting up a development environment, testing serverless functions locally, or establishing a fast iteration cycle with Vercel. Trigger with phrases like "vercel dev setup", "vercel local development", "vercel dev environment", "develop with vercel locally".
allowed-tools	Read, Write, Edit, Bash(vercel:), Bash(npm:), Bash(npx:*), Grep
version	1.18.0
license	MIT
author	Jeremy Longshore <jeremy@intentsolutions.io>
tags	["saas","vercel","development","testing","workflow"]
compatibility	Designed for Claude Code

Vercel Local Dev Loop

Overview

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.

Prerequisites

Completed vercel-install-auth setup
Project linked via vercel link
Node.js 18+ with npm/pnpm

Instructions

Step 1: Pull Environment Variables

# 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-..."

Step 2: Start Local Dev Server

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

Serverless function emulation at /api/* routes
Automatic TypeScript compilation
vercel.json rewrites, redirects, and headers applied locally
Environment variables loaded from .env*.local files
Framework detection (Next.js, Nuxt, SvelteKit, etc.)

Step 3: Test Serverless Functions Locally

# 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":"test@example.com"}'

# Test with query parameters
curl

# 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

# 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) })
    );
  });
});

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`