Next.js & GenAI
Next.js API routes commonly act as the backend boundary between a UI and a model provider or AI gateway.
Prerequisites
Overview
Next.js API routes (or route handlers) are a common place to keep a model provider’s API key server-side, apply per-user rate limits, and stream a response back to the browser without exposing credentials to client code.
Where It Fits
Browser
Next.js API Route
Keeps keys server-sideAI Gateway / Provider
Key Points
- Server-side credentials
- Model provider API keys live in server environment variables, never in client-shipped code.
- Streaming responses
- A route handler can return a streaming response so the browser starts rendering tokens before generation finishes.
- Edge vs. Node runtime
- Some AI SDKs and provider clients require the Node runtime rather than the edge runtime — worth checking before deploying.
Interview Question
Why shouldn’t a model provider’s API key ever be called directly from the browser?
Any key shipped to client code is visible to anyone inspecting network requests or bundled JavaScript — it would let an attacker make unlimited calls billed to your account. A server-side route keeps the key private and is also the natural place to enforce per-user rate limits and logging.
Explain It in 30 Seconds
Next.js API routes typically sit between a UI and a model provider, keeping API keys server-side, streaming responses back to the browser, and giving a single place to enforce rate limits and logging.
Real-World Stack
Technologies commonly used to implement this in production.