API keys exposed in client-side JavaScript

Call third-party APIs from a server route or backend, never from the browser. The browser talks to your endpoint; your endpoint holds the key.

// app/api/summarize/route.ts (server-only)
export async function POST(req: Request) {
  const { text } = await req.json();
  const r = await fetch("https://api.openai.com/v1/responses", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}` },
    body: JSON.stringify({ model: "gpt-4o-mini", input: text }),
  });
  return Response.json(await r.json());
}

In Next.js only variables prefixed with NEXT_PUBLIC_ are exposed to the browser. Never put a secret behind that prefix — use it only for values that are safe to be public.

If a secret has shipped to the browser, revoke and reissue it. Removing it from the next build doesn't invalidate copies already scraped.