Guide
Next.js App Router integration
Use ApiFuse generated schema artifacts from server-side Next.js App Router code.
Next.js App Router integration
Use Developer MCP to discover an operation and fetch generated TypeScript/Zod artifacts, then call ApiFuse from server-side App Router code. Never call ApiFuse with a secret key from a Client Component.
Server-only rule
Keep ApiFuse API keys and tenant auth mapping in server-only code. Browser components should receive your own application DTOs, not provider credentials or tenant connection references.
1. Fetch artifacts with Developer MCP
Ask your coding agent to:
- search for the operation with
apifuse_dev_search_operations; - fetch the operation contract with
apifuse_dev_get_operation_spec; - fetch TypeScript/Zod targets with
apifuse_dev_get_schema_bundle.
Commit generated artifacts into a server-only module, for example src/server/apifuse/generated/weather.ts.
2. Create a server route
// app/api/weather/route.ts
import { NextResponse } from "next/server";
import {
ShortForecastInputSchema,
ShortForecastOutputSchema,
} from "@/server/apifuse/generated/weather";
export async function POST(request: Request) {
const input = ShortForecastInputSchema.parse(await request.json());
const response = await fetch(
"https://api.apifuse.com/v1/kma-forecast/short-forecast",
{
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 },
);
}
const parsed = ShortForecastOutputSchema.parse(await response.json());
return NextResponse.json({ forecast: parsed });
}3. Call from a Client Component
"use client";
export async function loadForecast() {
const response = await fetch("/api/weather", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ baseDate: "20260525", baseTime: "0500", gridX: 60, gridY: 127 }),
});
if (!response.ok) throw new Error("Forecast request failed");
return response.json();
}Safety checklist
- Use generated Zod schemas on the server boundary.
- Keep
APIFUSE_API_KEYin server environment variables. - Do not expose provider credentials, tenant auth mapping, or canonical Connection identifiers to the browser.
- Do not ask Developer MCP to execute the provider operation; it only supplies discovery, schemas, and guidance.
- Treat changed
bundleHashortargetArtifactHashvalues as a signal to regenerate and review application code.