How to Add Environment Variables to Vercel

What you're doing and why it's painful

Environment variables let your app access secrets — API keys, database URLs, webhook signing secrets — without hardcoding them in your source code. In Vercel, they're stored securely and injected at build and runtime.

The pain: Vercel has three separate environments (Production, Preview, Development), and variables don't automatically sync between them. Adding a variable then wondering why your deployed app still can't see it is one of the most common Vercel gotchas — usually because you forgot to redeploy, or you set it for the wrong environment.

Prerequisites

• A Vercel account with a project deployed
• The value of the environment variable you want to add (e.g. your API key)

Step 1 — Go to your project's environment variable settings

1. Log in to Vercel
2. Select your project
3. Click the Settings tab (top nav)
4. In the left sidebar, click Environment Variables

Step 2 — Add the variable

1. In the Key field, enter your variable name — e.g. RESEND_API_KEY
2. In the Value field, paste the value — e.g. re_abc123...
3. Under Environments, check the boxes for the environments where this variable should be available:
   • Production — live deployments from your main branch
   • Preview — deployments from pull requests and other branches
   • Development — when you run vercel dev locally
4. Click Save

Repeat for each variable you need to add.

Step 3 — Redeploy to pick up the changes

This is the most commonly missed step. Adding a variable does not automatically update your running deployment. You need to trigger a new deployment.

The easiest way: go to the Deployments tab, find your most recent production deployment, click the three-dot menu, and select Redeploy.

Alternatively, push an empty commit to trigger a new deployment:

git commit --allow-empty -m "chore: trigger redeploy"
git push

Accessing the variable in your code

Server-side (Node.js, API routes, server components):

const apiKey = process.env.RESEND_API_KEY;

Client-side (browser): Variables must be prefixed with NEXT_PUBLIC_ to be exposed to the browser bundle:

// Variable name: NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
const stripeKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;

Without the NEXT_PUBLIC_ prefix, client-side code will see undefined.

Setting different values per environment

You can set different values for Production vs Preview. For example:

• Production: STRIPE_SECRET_KEY=sk_live_...
• Preview: STRIPE_SECRET_KEY=sk_test_...

To do this, add the variable twice — once with Production checked, once with Preview checked — using different values each time.

Using the Vercel CLI

If you prefer the terminal, the Vercel CLI lets you manage environment variables without touching the dashboard:

# Add a variable to production
vercel env add RESEND_API_KEY production

# Pull all variables to a local .env.local file
vercel env pull

# List all variables
vercel env ls

Install the CLI first: npm i -g vercel

Common errors and gotchas

Variable is undefined in deployed code You added it but didn't redeploy. Trigger a new deployment — existing deployments don't hot-reload environment variable changes.

Variable is undefined on the client Client-side variables must be prefixed NEXT_PUBLIC_. Anything without this prefix is server-only and intentionally hidden from the browser bundle.

Variable exists in dashboard but not locally Local development uses your .env.local file, not Vercel's dashboard. Either add it to .env.local manually, or run vercel env pull to sync all variables to a local file.

Preview deployments using production secrets Check your variable's environments — if you only checked Production when adding it, Preview deployments won't see it. Edit the variable and check Preview as well, then redeploy a preview branch.

VERCEL_URL is not the right variable for your app URL VERCEL_URL is the deployment URL (e.g. project-git-branch-org.vercel.app), not your custom domain. If you need your canonical production URL in code, add a separate NEXT_PUBLIC_APP_URL=https://yourdomain.com variable.