
Environment Variables You're Leaking to the Frontend Without Knowing It
You added NEXT_PUBLIC_ to your API key "just to test something quickly". That was six months ago. It's still there. Most developers know the rule: secret keys go in .env , never in client code. But the actual leaks aren't that obvious. They don't happen because someone is careless — they happen because the tooling is confusing, the error messages are silent, and the mistakes look completely fine until someone opens DevTools or pulls your bundle. Mistake 1 — The NEXT_PUBLIC_ prefix on secrets Next.js exposes any variable prefixed with NEXT_PUBLIC_ to the browser. That's by design. The problem is developers reach for it the moment they hit a "variable is undefined" error on the client side — without asking why it's undefined . # .env.local # Fine — this is meant to be public NEXT_PUBLIC_API_URL=https://api.example.com # DANGER — now exposed in every JS bundle NEXT_PUBLIC_STRIPE_SECRET_KEY=sk_live_xxxxxxxxx NEXT_PUBLIC_DATABASE_URL=postgres://user:password@host/db Anyone can open your dep
Continue reading on Dev.to
Opens in a new tab

