İstemci tarafı JavaScript'te açığa çıkan API key'leri

Üçüncü taraf API'leri bir server route'tan veya backend'den çağır, asla tarayıcıdan değil. Tarayıcı senin endpoint'inle konuşur; endpoint'in key'i tutar.

// 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());
}

Next.js'te yalnızca NEXT_PUBLIC_ önekli değişkenler tarayıcıya açılır. Bir secret'ı asla bu önekin arkasına koyma — onu yalnızca herkese açık olması güvenli değerler için kullan.

Bir secret tarayıcıya gönderildiyse, onu iptal et ve yeniden düzenle. Sonraki build'den kaldırmak, zaten kazınmış kopyaları geçersiz kılmaz.