---
title: "Environment variables work locally but are undefined in production"
description: "Environment variables are undefined in production when they only exist locally or were added after a deploy. How to check the host settings and fix them."
url: https://whocanfixmyapp.com/problems/environment-variables-undefined-in-production
---

[Home](https://whocanfixmyapp.com/) / [Problems](https://whocanfixmyapp.com/problems) / [Deploy and go live](https://whocanfixmyapp.com/problems#deploy-and-go-live)

# Environment variables work locally but are undefined in production

VC-19 · Vercel · Netlify · Next.js · Updated October 2026 · By [Nathaniel Kelley](https://whocanfixmyapp.com/authors/nathaniel-kelley)

Quick verdict

Partly fixable yourself. Add variables in the host and redeploy.

- **How serious**: Medium
- **Fix it yourself?**: Partly, some steps need a developer
- **Typical cost**: $49–$800 one-off check, or €99–$990 for a single fix ([prices](https://whocanfixmyapp.com/pricing))
- **Top rated**: [Afterbuild Labs](https://whocanfixmyapp.com/companies/afterbuild-labs) · **10.0**/10

**What you see.** Features that use API keys work on your laptop, but on the live site the key reads as undefined.

## Why it happens

On your laptop, keys live in a `.env.local` file. Next.js loads it automatically, and the default template keeps it out of Git. That is correct, but it means the file never reaches Vercel or Netlify. Hosts read variables only from their own settings. Netlify's docs say plainly that its build system does not read `.env` files.

Two more rules trip founders. Variables are applied at build time, so adding one after a deploy changes nothing until you deploy again. Vercel and Netlify both state this. And in Next.js only variables prefixed `NEXT_PUBLIC_` reach browser code, where they are inlined during the build. A server key without the prefix is undefined in a component that runs in the browser. The reverse mistake is worse: adding the prefix to a secret ships it to every visitor.

## Fix it yourself

1. List every variable in your local `.env.local`. Decide which are secrets, such as Stripe or OpenAI keys, and which are safe public values like a Supabase URL and publishable key.
2. Vercel: open the project, **Settings → Environment Variables**, add each one and tick Production and Preview. Netlify: **Project configuration → Environment variables**, with scope including Builds.
3. Trigger a new deploy. Both hosts apply changes only to the next deployment, so the live one keeps the old values.
4. If a value is still undefined in the browser, check the name. Browser code needs the `NEXT_PUBLIC_` prefix, and dynamic lookups such as `process.env[name]` are never inlined.
5. Never add `NEXT_PUBLIC_` to a secret key to make it work. Move that call into a server action or route handler instead.
6. Check that Preview deployments have their own test keys so testing never charges real customers.

## When to get an engineer

Hire when a secret key is already in browser code, which means rotating it and moving the call to the server, or when server actions still cannot see values after a redeploy. Send the engineer the variable names, never the values, plus the host and the failing page. A one-off check is $49–$800. A single fix that moves a key server-side is €99–$990. See [our v0 guide](https://whocanfixmyapp.com/guides/v0) for the Next.js specifics.

## Top-rated companies

Ranked by our score: published prices, scope of work, AI tools named, timing and a low-risk first step. [How we score](https://whocanfixmyapp.com/methodology#score).

- 1 · [Afterbuild Labs](https://whocanfixmyapp.com/companies/afterbuild-labs) · **10.0**/10 · Best for: A check before launch · Free first step · from $49
- 2 · [Redlab](https://whocanfixmyapp.com/companies/redlab) · **10.0**/10 · Best for: A full rescue by one team that keeps building · Free first step · from $490
- 3 · [Vibe Code Rescue (Lev Arakelyan)](https://whocanfixmyapp.com/companies/vibe-code-rescue-lev-arakelyan) · **9.0**/10 · Best for: A one-off check and a cleanup · From $299

[All 79 companies, ranked](https://whocanfixmyapp.com/directory#ranking)

## Check these

OPS-04 · Medium

Secrets live in the host's environment settings

Keys belong in environment variables on the server, not in the repository or in front-end code.

DATA-02 · Critical

No secret keys reach the browser

Open your live app, then DevTools, Sources, and search the loaded JavaScript for `sb_secret_`, `sk_live_`, `sk-proj-` and `sk-ant-`. Older Supabase keys are long tokens starting with `eyJ`: decode the middle part of each on your own machine, and if it contains `"role":"service_role"`, your secret key is public. A publishable or anon key in the browser is expected.

OPS-02 · High

Testing and real users use separate databases

Experiments and AI agents should never run against production data.

OPS-03 · High

Errors reach you before users do

Add error monitoring and uptime alerts. If you learn about outages from customers, this is missing.

## Questions

### Why did it work locally?

Next.js loads .env.local on your machine, and that file is excluded from Git by default. The host never receives it, so each variable must be added in the host's settings.

### I added the variable and it is still undefined. Why?

Redeploy. Vercel and Netlify apply variable changes only to new deployments. If it is browser code, the name also needs the NEXT_PUBLIC_ prefix.

Sources: [Next.js: Environment variables](https://nextjs.org/docs/pages/guides/environment-variables); [Vercel: Environment variables](https://vercel.com/docs/environment-variables); [Netlify: Get started with environment variables](https://docs.netlify.com/build/environment-variables/get-started/); [Netlify: Build environment variables](https://docs.netlify.com/build/configure-builds/environment-variables/).

**Same category**

- [Lovable app not working: what breaks between preview and production](https://whocanfixmyapp.com/problems/lovable-app-not-working)
- [Base44 app not loading or stuck on Thinking: what it usually means](https://whocanfixmyapp.com/problems/base44-app-not-loading)
- [v0 app needs a backend and deployment: what to add before real users](https://whocanfixmyapp.com/problems/v0-app-needs-a-backend)
- [Claude Code or Cursor app works on localhost, breaks in production](https://whocanfixmyapp.com/problems/claude-code-works-on-localhost-breaks-in-production)
- [Lovable publish fails with a build error](https://whocanfixmyapp.com/problems/lovable-publish-failed-build-error)
- [Lovable custom domain stuck on Verifying or Setting up](https://whocanfixmyapp.com/problems/lovable-custom-domain-stuck-verifying)

[All deploy and go live problems](https://whocanfixmyapp.com/problems#deploy-and-go-live)

**Run every check**

The [production checklist](https://whocanfixmyapp.com/checklist) has all 24 checks with a verdict.