Vercel environment variables not working? 6 reasons and fixes

Your app works locally, but on Vercel an API key is undefined or the database won't connect. It's almost always one of these six things.

1. You didn't redeploy. Changing a variable doesn't update deployments that already exist. Redeploy after every change.
2. It's set for the wrong environment. Vercel has Production, Preview and Development, so check the variable is ticked for the one you're using.
3. Browser code needs a prefix. In Next.js, only variables starting with NEXT_PUBLIC_ reach the browser, and in Vite it's VITE_. These values are baked in at build time, so redeploy after changing them.
4. Secrets must NOT have that prefix. Anything with NEXT_PUBLIC_ or VITE_ is visible to every visitor. Keep secret keys server-side only.
5. The name doesn't match exactly. Names are case-sensitive, and a trailing space or quote marks pasted into the value will also break it.
6. Multi-line keys got mangled. Private keys (like a Firebase service account) often need their line breaks stored as \n and restored in code.

// restoring a multi-line private key stored with \n
const privateKey = process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, "\n");

Check what's actually set

vercel env ls            # list variables per environment
vercel env pull .env.local  # copy them to your computer for local testing

Never print secret values in logs to debug. Log whether they exist instead, e.g. console.log("has key:", Boolean(process.env.STRIPE_SECRET_KEY)).