サーバー経由で安全に呼ぶ

なぜ学ぶか： Phase 09で最も重要なトピック。「AIチャットを作った、でもAPIキーが漏れて高額請求」— これは実際に多発する事故で、このカリキュラムがセキュリティを重視してきた理由そのものです。フロント直呼びが『なぜ』危険かを理解し、Route Handlerで中継する正しい構成を身につけます。

コード例

// app/api/chat/route.ts — ブラウザとClaudeの間の「中継所」import Anthropic from "@anthropic-ai/sdk";import { z } from "zod";
const client = new Anthropic(); // キーはサーバーの環境変数から
// 入力を検証（信じない）const BodySchema = z.object({  message: z.string().min(1).max(2000),});
export async function POST(request: Request) {  const parsed = BodySchema.safeParse(await request.json());  if (!parsed.success) {    return Response.json({ error: "入力が不正です" }, { status: 400 });  }
  const res = await client.messages.create({    model: "claude-opus-4-8",    max_tokens: 1024,    messages: [{ role: "user", content: parsed.data.message }],  });
  const text = res.content.find((b) => b.type === "text");  // ブラウザには「結果」だけ返す。キーは一切出さない  return Response.json({ reply: text?.type === "text" ? text.text : "" });}

ブラウザ → /api/chat → Claude、の流れ。ブラウザは自分のAPIを叩くだけで、Claudeのキーには一切触れません。これがAIアプリの唯一の安全な型です。