Route Handler

なぜ学ぶか： 「APIキーを使って外部サービスを呼びたい。でもキーをブラウザに置いたら盗まれる」— この定番問題の答えがRoute Handlerです。app/api/に置く「自分専用のAPI窓口」を、例で見てください。

まずはこの例を見てみましょう

// app/api/greet/route.ts → /api/greet という「自分のAPI」になる
export async function GET() {
  // ここはサーバー: 秘密のキーを使っても、ブラウザには漏れない
  const apiKey = process.env.SECRET_API_KEY;

  // （ここでキーを使って外部サービスを呼ぶ…）

  return Response.json({ message: "こんにちは" }); // 結果だけ返す
}

ブラウザ → 自分のAPI（/api/greet）→ 外部サービス。秘密のキーはサーバーから一歩も出ません。

コード例

// app/api/greet/route.ts — /api/greet という API になる
import { NextResponse } from "next/server";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const name = searchParams.get("name") ?? "ゲスト";

  // ここはサーバー: 秘密のキーを使っても漏れない
  // const apiKey = process.env.SECRET_API_KEY;

  return NextResponse.json({ message: `こんにちは、${name}さん` });
}

GET /api/greet?name=Ada への応答:
{ "message": "こんにちは、Adaさん" }

route.tsはページではなく「APIの窓口」。ブラウザ → /api/greet → サーバー処理 → JSON応答、という流れで、秘密はサーバー側に留まります。