클라이언트 측 JavaScript에 노출된 API 키

서드파티 API를 브라우저가 아니라 서버 route나 백엔드에서 호출하세요. 브라우저는 여러분의 endpoint와 통신하고, endpoint가 키를 보유합니다.

// 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에서는 NEXT_PUBLIC_ 접두사가 붙은 변수만 브라우저에 노출됩니다. 그 접두사 뒤에 시크릿을 절대 두지 말고, 공개해도 안전한 값에만 사용하세요.

시크릿이 브라우저로 전달됐다면 이를 폐기하고 재발급하세요. 다음 빌드에서 제거해도 이미 수집된 사본은 무효화되지 않습니다.