Your NEXT_PUBLIC secret is already in the browser bundle
Problem In a Next.js app it’s easy to slip a secret (e.g., STRIPE_SECRET_KEY , OpenAI API key, Supabase JWT) into a client‑side bundle. When a server component reads process.env.STRIPE_SECRET_KEY it stays on the server, but copying that line into a client component causes the build to fail to resolve the variable. The common “quick fix”—renaming the variable with the NEXT_PUBLIC_ prefix—makes the…
Secrets like Stripe API keys and OpenAI tokens can unintentionally end up in the client-side bundle of a Next.js application. When developers try to access these secrets in server components, the build process automatically strips them from the client bundle. However, a developer might mistakenly copy the secret from a server component to a client component, or import a shared utility that includes the secret.
This results in the secret being included in the JavaScript that every visitor downloads, turning a server-only secret into a publicly exposed piece of information. Tools like KeyDrift can detect these unintentional leaks by scanning the client bundle for hard-coded secrets and environment variables. The scan cross-references each detected credential with the tool that introduced it, providing a clear report of the issue.
To fix the problem, developers have several options: they can keep the secret on the server, call a server-side function from the client, or remove the NEXT_PUBLIC_ prefix for real secrets. After making these changes, it's crucial to run a KeyDrift scan to ensure the secret is no longer present in the client bundle. Preventing these leaks involves storing public keys and tokens separately from the server-side secrets, avoiding dynamic imports of server-side modules, and properly configuring build settings to avoid stale bundles that contain the leaked values.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
