By 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)
- Top rated
- 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
- 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. - Vercel: open the project, Settings → Environment Variables, add each one and tick Production and Preview. Netlify: Project configuration → Environment variables, with scope including Builds.
- Trigger a new deploy. Both hosts apply changes only to the next deployment, so the live one keeps the old values.
- If a value is still undefined in the browser, check the name. Browser code needs the
NEXT_PUBLIC_prefix, and dynamic lookups such asprocess.env[name]are never inlined. - Never add
NEXT_PUBLIC_to a secret key to make it work. Move that call into a server action or route handler instead. - 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 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.
- 1Afterbuild Labs10.0/10Best for: A check before launchFree first step · from $49
- 2Redlab10.0/10Best for: A full rescue by one team that keeps buildingFree first step · from $490
- 3Vibe Code Rescue (Lev Arakelyan)9.0/10Best for: A one-off check and a cleanupFrom $299
Check these
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.
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.
Testing and real users use separate databases
Experiments and AI agents should never run against production data.
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; Vercel: Environment variables; Netlify: Get started with environment variables; Netlify: Build environment variables.