サーバー側 Next.js App Router コードから APIFuse を呼び出します。

Next.js App Router 連携

サーバー側 App Router コードから APIFuse を使用します。APIFuse API キーはサーバー専用の設定に保存し、クライアントコンポーネントにはアプリケーション固有のデータを返します。

1. 入力を検証する

APIFuse を呼び出す前に、operation schema または schema bundle artifact を使って受信リクエストデータを検証します。

2. route handler から APIFuse を呼び出す

import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const input = await request.json();

  const response = await fetch(
    "https://api.apifuse.com/v1/kakaomap/search",
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.APIFUSE_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(input),
      cache: "no-store",
    },
  );

  if (!response.ok) {
    return NextResponse.json(
      { error: "apifuse_request_failed" },
      { status: response.status },
    );
  }

  return NextResponse.json(await response.json());
}

3. secret をサーバーに保つ

APIFuse API キー、provider credential、Connection ID をブラウザコードに公開しないでください。クライアントコンポーネントは APIFuse gateway を直接呼び出さず、アプリケーションの route を呼び出すべきです。