vercel-multi-env-setup

Configure Vercel across development, preview, and production environments with scoped secrets. Use when setting up per-environment configuration, managing environment-specific variables, or implementing environment isolation on Vercel. Trigger with phrases like "vercel environments", "vercel staging", "vercel dev prod", "vercel environment setup", "vercel env scoping".

Jump to install

Repository: jeremylongshore/tons-of-skills-marketplace
Last source activity: August 19, 2026 at 12:13
Detected SKILL.md language: English
Stars: 2,677
Forks: 392

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

Back to search Back to installation

name	vercel-multi-env-setup
description	Configure Vercel across development, preview, and production environments with scoped secrets. Use when setting up per-environment configuration, managing environment-specific variables, or implementing environment isolation on Vercel. Trigger with phrases like "vercel environments", "vercel staging", "vercel dev prod", "vercel environment setup", "vercel env scoping".
allowed-tools	Read, Write, Edit, Bash(vercel:*)
version	1.18.0
license	MIT
author	Jeremy Longshore <jeremy@intentsolutions.io>
tags	["saas","vercel","deployment","environments","configuration"]
compatibility	Designed for Claude Code

Vercel Multi-Env Setup

Overview

Configure Vercel's three built-in environments (Development, Preview, Production) with scoped environment variables, branch-specific preview URLs, and custom environments for staging. Uses Vercel's native environment system and the REST API for automation.

Prerequisites

Vercel project linked and deployed
Separate database instances per environment (recommended)
Access to Vercel dashboard or VERCEL_TOKEN for API

Instructions

Step 1: Understand Vercel's Environment Model

Vercel provides three built-in environments:

Environment	Trigger	URL Pattern	Use Case
Production	Push to production branch	`yourdomain.com`	Live traffic
Preview	Push to any other branch	`project-git-branch-team.vercel.app`	PR review
Development	`vercel dev` locally	`localhost:3000`	Local dev

Step 2: Scope Environment Variables

# Add a variable scoped to Production only
vercel env add DATABASE_URL production
# Enter: postgres://prod-host:5432/myapp

# Add a variable scoped to Preview only
vercel env add DATABASE_URL preview
# Enter: postgres://staging-host:5432/myapp_staging

# Add a variable scoped to Development only
vercel env add DATABASE_URL development
# Enter: postgres://localhost:5432/myapp_dev

# Add a variable available in ALL environments
vercel env add NEXT_PUBLIC_APP_NAME production preview development
# Enter: My App

# List all env vars with their scopes
vercel env ls

Step 3: Via REST API (Automation)

# Create env vars with specific scoping
curl -X POST  \
  -H  \
  -H  \
  -d 


curl -X POST  \
  -H  \
  -H  \
  -d 


curl -s -H  \
   \
  | jq

# Create a custom environment via API
curl -X POST "https://api.vercel.com/v1/projects/my-app/custom-environments" \
  -H "Authorization: Bearer $VERCEL_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Staging",
    "slug": "staging",
    "branchPattern": "staging"
  }'

# Assign a custom domain to a specific branch
# In dashboard: Settings > Domains > Add
# Set Git Branch: "staging"
# Domain: staging.yourdomain.com

# Via API — add domain to project with branch targeting
curl -X POST "https://api.vercel.com/v9/projects/my-app/domains" \
  -H "Authorization: Bearer $VERCEL_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "staging.yourdomain.com",
    "gitBranch": "staging"
  }'

// src/lib/env.ts — detect environment at runtime
export function getEnvironment(): 'production' | 'preview' | 'development' {
  return (process.env.VERCEL_ENV as any) ?? 'development';
}

// Environment-specific behavior
export function getApiBaseUrl(): string {
  switch (getEnvironment()) {
    case 'production':
      return 'https://api.yourdomain.com';
    case 'preview':
      return `https://${process.env.VERCEL_URL}`;
    case 'development':
      return 'http://localhost:3000';
  }
}

// Production safeguards
export function assertNotProduction(operation: string): void {
  if (getEnvironment() === 'production') {
    throw new Error(`Dangerous operation "${operation}" blocked in production`);
  }
}

# Pull Development-scoped vars to local file
vercel env pull .env.development.local

# Pull Preview-scoped vars (for testing preview behavior locally)
vercel env pull --environment=preview .env.preview.local

# .gitignore these files
echo '.env*.local' >> .gitignore

Type	Dashboard Visibility	Log Visibility	Use Case
`plain`	Visible	Visible	Non-sensitive config
`encrypted`	Hidden after save	Hidden	API keys, secrets
`sensitive`	Always hidden	Hidden	High-security secrets
`system`	Auto-set by Vercel	Visible	`VERCEL_ENV`, `VERCEL_URL`

Error	Cause	Solution
Env var undefined in preview	Not scoped to Preview target	Re-add with Preview in target array
Wrong database in production	Preview DB URL used in prod	Check env var scoping per environment
`vercel env pull` empty	No Development-scoped vars	Add vars with Development target
Custom env not triggering	Branch pattern doesn't match	Check branch name matches environment slug
Sensitive var can't be read	type=sensitive hides value	Re-add the var if value is lost