How to Integrate AI APIs into Next.js App Router: Complete 2026 Production Guide

Overview #

A step-by-step developer tutorial for integrating multi-model AI APIs into Next.js App Router using Server-Sent Events (SSE), Route Handlers, Edge Runtime, and Vercel AI SDK with sub-50ms streaming.

Next.js App Router Route Handler Architecture #

Never call AI APIs directly from client components, as this exposes your API secrets in browser DevTools. Instead, create a Route Handler at app/api/chat/route.ts. The route handler validates user authentication, enforces rate limits, invokes the unified gateway over HTTPS, and returns a ReadableStream to the client.

Streaming Tokens with OpenAI SDK and Edge Runtime #

By configuring export const runtime = 'edge', your Next.js route executes on distributed edge points-of-presence (PoPs) closest to the end user. Transforming the gateway's SSE stream into a Web standard Response object ensures zero buffering and instant word-by-word streaming.

Handling Upstream Timeouts & Client Disconnects #

Listen for client request.signal.aborted events. When a user closes their tab or navigates away, instantly abort the upstream gateway call to prevent wasting token credits on abandoned generations.

Code Example: Production Next.js Route Handler for Streaming AI Responses #

// app/api/chat/route.ts
import { NextRequest, NextResponse } from "next/server";
import OpenAI from "openai";

export const runtime = "edge";

const client = new OpenAI({
  baseURL: "https://api.apihundred.com/v1",
  apiKey: process.env.API100_API_KEY,
});

export async function POST(req: NextRequest) {
  const { messages, model = "claude-sonnet-5" } = await req.json();

  const stream = await client.chat.completions.create({
    model,
    messages,
    stream: true,
  });

  const encoder = new TextEncoder();
  const readable = new ReadableStream({
    async start(controller) {
      for await (const chunk of stream) {
        const text = chunk.choices[0]?.delta?.content || "";
        if (text) controller.enqueue(encoder.encode(text));
      }
      controller.close();
    },
  });

  return new Response(readable, {
    headers: { "Content-Type": "text/event-stream; charset=utf-8" },
  });
}

Frequently Asked Questions #

Q: Why should I use Edge Runtime for AI streaming in Next.js?

Edge Runtime eliminates Node.js cold starts, supports persistent streaming connections without proxy timeouts, and runs closer to global end users.

Q: Can I switch between Claude, GPT, and Gemini in the same Next.js route?

Yes, by using an OpenAI-compatible gateway like API100, simply pass the requested model ID ('gpt-6-astra', 'gemini-3.8-flash', 'claude-sonnet-5') in the request payload.

Q: How do I prevent API key exposure in Next.js?

Store your key in .env.local without the NEXT_PUBLIC_ prefix so it is strictly accessible on the server side.