Integrating AI APIs in Next.js: A Full Stack Developer's Playbook

As an AI Application Developer based in Karachi, Pakistan, I have spent the last year integrating AI APIs into production Next.js apps. This is a practical playbook of the patterns that actually work — not a tutorial on what AI is.

Why Server Routes for AI Calls

Never expose your AI API keys in client-side JavaScript. In Next.js 16 App Router, every file under app/api/ is a server route. I write all my AI calls there: the client sends a prompt, the server attaches the API key, calls the provider, and returns the response. My My Skills Career Platform uses this exact pattern for all 7 of its AI tools.

Three Providers I Use

OpenAI for chat and structured output, Gemini AI for multimodal (image + text) workloads, and the z-ai-web-dev-sdk for web search and content generation. Each has different rate limits and pricing — I route expensive operations through z-ai-web-dev-sdk where possible because it handles billing more predictably. You can see this in the Lead to Launch case study where AI web search drives the entire lead discovery pipeline.

Streaming Responses

For chat interfaces, never wait for the full response — stream it. Next.js 16 supports streaming via ReadableStream in route handlers. I split the AI response into chunks and send each as a Server-Sent Event. The client appends each chunk to the conversation, giving the user a ChatGPT-like experience.

Prompt Design Is a Skill

A good prompt is not a magic string — it is a contract. I always include: the role the AI should play, the input format it will receive, the output format I expect, and a few-shot example. For my AI Resume Analyzer, I tell the model: "You are an ATS reviewer. Input: a resume string. Output: a JSON object with score, missing_keywords, suggestions. Example: {score: 78, ...}." This consistency is what made 7 AI tools shippable in one project, as documented on the projects page.

Cost Control

AI calls add up fast. I cache responses in a SQLite table keyed on the prompt hash, return the cached version for repeat prompts, and only call the API on miss. I also set a hard daily token cap per user. Without these two guardrails, AI features bankrupt a small project quickly.

What I Would Tell My Past Self

Start with server routes, stream everything, design prompts as contracts, and add caching from day one. If you are a Full Stack Developer looking to add AI features to your portfolio, my services page lists the AI development services I offer.