How-To Guide

How to Set Up Vercel Environment Variables

Securely configure secrets for your Vercel deployments

TL;DR

TL;DR: Go to Project Settings → Environment Variables in your Vercel dashboard. Add your key-value pairs and select which environments (Production, Preview, Development) should have access. Redeploy to apply changes. Use the Vercel CLI to sync variables locally.

Step-by-Step Setup

Open your Vercel project

Go to vercel.com/dashboard and select your project. You need to be the project owner or have the right permissions to manage environment variables.

Navigate to Environment Variables

Click on Settings in the top navigation, then select Environment Variables from the left sidebar.

Add a new variable

Enter your variable:

Key: The variable name (e.g., STRIPE_SECRET_KEY)
Value: The secret value
Environment: Select which environments need this variable

Choose target environments

Vercel has three environment types:

Environment	When Used	Recommended For
Production	Your main domain	Live API keys
Preview	PR preview deployments	Test API keys
Development	vercel dev locally	Local dev keys

Redeploy your application

Environment variables only take effect after a new deployment:

# Via CLI
vercel --prod

# Or push a commit to trigger auto-deploy
git commit --allow-empty -m "Apply env vars"
git push

Using the Vercel CLI

The Vercel CLI offers powerful tools for managing environment variables:

Pull variables for local development

# Pull all environment variables to .env.local
vercel env pull .env.local

This creates a .env.local file with all your Development environment variables.

Add variables via CLI

# Add a variable (interactive prompts for value and environments)
vercel env add STRIPE_SECRET_KEY

# Add with value directly
echo "sk_test_xxxxx" | vercel env add STRIPE_SECRET_KEY production

List all variables

vercel env ls

Remove a variable

vercel env rm VARIABLE_NAME

Best Practices

Use different keys for different environments

# Production (live keys)
STRIPE_SECRET_KEY=sk_live_xxxxx  → Production only

# Preview/Development (test keys)
STRIPE_SECRET_KEY=sk_test_xxxxx  → Preview + Development

Sensitive vs Non-Sensitive

Vercel marks variables as "Sensitive" by default, which hides the value after saving. You can toggle this when adding a variable.

Never expose secret keys to the browser

In Next.js, only variables prefixed with NEXT_PUBLIC_ are available in browser code. Never prefix secret keys with NEXT_PUBLIC_.

# WRONG - Exposed to browser
NEXT_PUBLIC_STRIPE_SECRET=sk_live_xxxxx

# CORRECT - Server-side only
STRIPE_SECRET_KEY=sk_live_xxxxx

# CORRECT - Safe for browser (publishable key)
NEXT_PUBLIC_STRIPE_PUBLISHABLE=pk_live_xxxxx

Common Variables for Vercel Projects

# Database
DATABASE_URL=postgresql://...
DIRECT_URL=postgresql://...  # For Prisma

# Authentication
NEXTAUTH_SECRET=random-32-char-string
NEXTAUTH_URL=https://your-domain.com

# Third-party services
STRIPE_SECRET_KEY=sk_live_xxxxx
OPENAI_API_KEY=sk-xxxxx
RESEND_API_KEY=re_xxxxx

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...

Do I need to redeploy after changing environment variables?

Yes. Environment variables are baked into the deployment at build time. You must trigger a new deployment for changes to take effect. Use vercel --prod or push a commit.

Can team members see environment variable values?

Team members with the right permissions can view and edit variables. Use "Sensitive" marking to hide values after they're saved. Consider using Vercel's integration with secret managers for extra security.

How do I use environment variables in vercel.json?

You can reference environment variables in vercel.json using the $ syntax, but only for specific fields like redirects. For security reasons, you cannot expose arbitrary secrets this way.