Leaked API keys in Next.js — NEXT_PUBLIC_ prefix + client-bundle audit

What it is

Next.js distinguishes server-only env vars (no prefix) from public env vars (NEXT_PUBLIC_ prefix). Public-prefix vars are inlined into client JavaScript at build time. Mixing them up = secrets in the bundle.

Vulnerable example

// .env.local
NEXT_PUBLIC_OPENAI_API_KEY=sk-proj-XXX  // WRONG — ships to client

// app/components/Chat.tsx
const response = await fetch("https://api.openai.com/v1/chat/completions", {
  headers: { Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}` }
});

Fixed example

// .env.local
OPENAI_API_KEY=sk-proj-XXX  // server-only

// app/api/chat/route.ts (server)
export async function POST(req: Request) {
  const { message } = await req.json();
  const r = await fetch("https://api.openai.com/v1/chat/completions", {
    headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}` },
    method: "POST", body: JSON.stringify({ messages: [{ role: "user", content: message }] }),
  });
  return Response.json(await r.json());
}

How Securie catches it

// .env.local
OPENAI_API_KEY=sk-proj-XXX  // server-only

// app/api/chat/route.ts (server)
export async function POST(req: Request) {
  const { message } = await req.json();
  const r = await fetch("https://api.openai.com/v1/chat/completions", {
    headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}` },
    method: "POST", body: JSON.stringify({ messages: [{ role: "user", content: message }] }),
  });
  return Response.json(await r.json());
}

Checklist

• No NEXT_PUBLIC_ prefix on secrets
• Run grep -rE 'NEXT_PUBLIC_.*KEY' on .env files quarterly
• Proxy paid-API calls server-side via app/api routes
• Per-key spend caps as backstop
• Securie reviews on every PR

FAQ

Related guides