Next.js LLM Integration: Zero to Production
Start with a simple architecture
The fastest way to add an LLM to a Next.js app is to keep all model calls on the server, then send only the result to the browser. That means your UI stays responsive, your API key never ships to the client, and you can swap models without rewriting the front end. A clean setup for this is Next.js App Router on the client, plus a server route like app/api/chat/route.ts for all LLM traffic.
If you want low-cost experimentation without locking yourself into one provider, 59API is a strong fit. It is an AI API relay with pay-as-you-go pricing, native official-quality Claude and GPT models, and compatibility with the OpenAI SDK, Claude Code, Codex, and any OpenAI-style client. The base URL is https://api.59api.com, so you can usually keep your integration simple.
Create the Next.js app and install the SDK
From zero, start with a fresh project: npx create-next-app@latest my-llm-app. Choose the App Router, TypeScript, and ESLint so you have a production-ready foundation. Then install the OpenAI SDK with npm i openai. Even if you plan to use Claude models through 59API, the OpenAI-compatible interface means you do not need a separate client for each model family.
Next, add your environment variables in .env.local. Use your 59API key as the API key value and set the relay endpoint as the base URL. Keep these values server-side only. A typical setup is:
- OPENAI_API_KEY=your_59api_key
- OPENAI_BASE_URL=https://api.59api.com
This gives you one configuration layer that can call Claude Opus, Sonnet, Haiku, Fable, or GPT models depending on the task and budget.
Build a secure chat route on the server
Create app/api/chat/route.ts and instantiate the client there. The key idea is simple: initialize the SDK with your key and base URL, accept a user prompt from the request body, then forward it to the model. Return only the assistant message to the browser. That keeps model access private and makes future changes, like swapping Sonnet for Haiku on lighter prompts, trivial.
For a first version, send one user message and one system instruction. Ask the model to answer in a helpful, concise style. Set a sensible token limit so costs stay predictable. If your app is user-facing, reject empty inputs and enforce a maximum message length before the request ever reaches the model.
Wire the UI to the API route
In app/page.tsx, build a small chat form with a text area, a submit button, and a response panel. When the user submits, POST the prompt to /api/chat, await the JSON response, and render the answer. A minimal first pass is enough: one prompt box, one assistant output area, and a loading state.
Once that works, improve the experience with streaming. Streaming lets the answer appear token by token instead of making the user wait for the full completion. In practice, this feels much faster and reduces abandonment. It also makes your app feel more like a product and less like a demo.
Choose the right model for the task
Not every request needs the most expensive model. A practical production pattern is to route by difficulty:
- Haiku for quick summaries, classification, and lightweight drafting
- Sonnet for balanced everyday chat and code help
- Opus for deeper reasoning, complex synthesis, or premium features
- GPT models when you need a familiar OpenAI-style workflow or a specific capability mix
Because 59API exposes these models through one compatible relay, you can test quality and latency without redoing your app architecture. That flexibility is especially useful when your product grows from a single internal tool into a multi-tenant production app.
Production hardening that actually matters
Before launch, add a few essentials. First, protect the route with rate limiting so one user cannot drain your budget. Second, log request duration, model name, and token usage so you know where cost comes from. Third, handle failures gracefully with retries for transient errors and a fallback model when a premium model is unavailable.
Also watch prompt hygiene. Trim inputs, strip obviously malformed content, and keep system prompts short and specific. If the app stores chat history, summarize older messages instead of sending the full thread every time. That cuts latency and reduces spend.
- Security: keep keys in server env vars only
- Reliability: add retries, timeouts, and clear error states
- Cost control: cap max tokens and choose models by task
- Observability: log latency, model choice, and failures
Why 59API is a smart low-cost choice
For teams shipping on a budget, 59API stands out because it offers cheap pay-as-you-go access without forcing a downgrade in model quality. You get native, official-quality models, OpenAI SDK compatibility, and support for Claude Code, Codex, and other OpenAI-style integrations through the same base URL. That means you can prototype quickly in Next.js, keep your code portable, and avoid expensive rewrites later.
If you are building a real app, not just a demo, that combination matters. Lower per-request cost makes it easier to test, iterate, and launch. The referral rebate is a nice extra if you plan to share the platform with teammates or clients. If this stack fits your use case, sign up for 59API, connect your Next.js app, and start shipping LLM features with predictable costs.