Integrating OpenAI API in Next.js: A Practical Guide
From API route setup to streaming responses and cost control — everything I've learned building AI-native features in production Next.js apps.
I won a hackathon in 2025 by building an AI feature planner using the OpenAI API in Next.js. Since then I've integrated it into several production projects. Here's what actually matters in practice.
Always call OpenAI from a server-side API route — never from the client. Your API key will be exposed in the browser bundle if you call it client-side. In Next.js App Router, create `app/api/chat/route.ts`, read the key from `process.env`, and return a streaming `ReadableStream`.
Streaming is non-negotiable for good UX. A 3-second blank wait feels broken. A response that starts appearing in 300ms feels fast even if it takes 5 seconds total. Use `openai.chat.completions.create` with `stream: true` and pipe the chunks directly to the response.
System prompts are your most powerful lever. A vague system prompt produces vague output. A prompt that specifies the exact output format, length constraints, and tone produces consistent, usable output. I always include: role definition, output format (JSON schema if structured), length limit, and fallback instructions for edge cases.
Cost control matters at scale. Use `gpt-4o-mini` for anything that doesn't need strong reasoning — it's 10x cheaper than `gpt-4o` and plenty capable for classification, summarization, and simple generation. Set `max_tokens` explicitly. And cache responses for identical inputs using Redis or even `unstable_cache` in Next.js.