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'll need to be the project owner, or have permissions that cover 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
A saved variable does nothing on its own. Vercel bakes values in at build time, so the running deployment keeps whatever it was built with until you ship a new one:
# 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
Everything above works from the terminal too, which is worth knowing because pulling variables down is the only comfortable way to run the same config locally.
Pull variables for local development
# Pull all environment variables to .env.local
vercel env pull .env.local
That writes a .env.local file holding your Development variables. Add it to .gitignore before you do anything else.
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 "Sensitive" by default, so the value disappears from the dashboard once you save it. You can toggle that when adding one. It guards against shoulder-surfing, not against your code leaking the value.
Never expose secret keys to the browser
In Next.js the NEXT_PUBLIC_ prefix is what makes a variable available to browser code, and that's not a hint to the bundler. It's an instruction. Prefix a secret with it and the value gets compiled into the JavaScript you serve, where anyone can read it out of the bundle in about thirty seconds. The prefix belongs on publishable keys only.
# 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. Values are baked into the deployment at build time, so editing one in the dashboard changes nothing about what's currently running. Trigger a new deployment with vercel --prod or push a commit.
Can team members see environment variable values?
Team members with the right permissions can view and edit them. Marking a variable Sensitive hides the value once it's saved, which helps. If you need more than that, Vercel integrates with dedicated secret managers.
How do I use environment variables in vercel.json?
You can reference them with the $ syntax, but only in specific fields such as redirects. Arbitrary secrets can't be surfaced this way, which is deliberate rather than a limitation to work around.
Related guides:Environment Variables Guide · Netlify Environment Variables · How to Hide API Keys