← Retour aux guides

Integrating LLMs into Next.js: A Practical 2026 Guide

Integrating LLMs into a Next.js app takes more than connecting a chat interface to an API. A production implementation needs protected credentials, responsive streaming, predictable costs, and sensible failure handling. This 2026 guide uses the App Router, a server-side Route Handler, and the OpenAI SDK to build that foundation, with 59API providing affordable access to multiple model families.

1. Set up your project and server credentials

Create an App Router project with npx create-next-app@latest, enable TypeScript, and install the SDK with npm install openai. Store your relay key as API_59API_KEY in .env.local, and add the same secret through your deployment platform’s environment settings.

Never prefix this secret with NEXT_PUBLIC_: those variables can be included in browser bundles. Your browser should call your own application endpoint, while the server makes authenticated requests to 59API.

59API’s API base URL is https://api.59api.com. Configure the SDK’s baseURL using the exact OpenAI-compatible endpoint shown in its integration instructions, including any required path prefix. Copy the API model identifier from the dashboard rather than assuming its display name is the request identifier.

2. Build a controlled server endpoint

Create app/api/chat/route.ts and export an asynchronous POST handler. Import OpenAI from the openai package, initialize it with your server secret and configured baseURL, and explicitly select the Node.js runtime if your integration depends on Node-specific packages.

Before calling the model, authenticate the user and validate the request body. Accept only the message roles and fields your interface actually needs. Enforce a request-size limit, cap individual message lengths, and reject oversized conversation histories.

Keep the developer instructions on the server. Build the outbound message list from those trusted instructions and validated conversation turns; do not let the browser supply privileged instructions or arbitrary model settings. Then call client.chat.completions.create with the configured model, messages, and stream: true, provided that endpoint is supported for your selected model.

3. Stream responses with an explicit format

The SDK returns an asynchronous stream. Iterate over its chunks, extract available text from choices[0]?.delta?.content, encode it with TextEncoder, and enqueue it into a Web ReadableStream returned through Response.

For a basic text interface, use Content-Type: text/plain; charset=utf-8. In a Client Component, POST to /api/chat, check response.ok, then read response.body with a reader and an incremental TextDecoder. Append decoded text to the assistant message as it arrives.

If you need usage records, citations, or structured error events, define a framed protocol such as server-sent events. Do not mix raw text and JSON without framing. Provide a Stop button using AbortController and propagate cancellation upstream so abandoned requests do not keep generating unnecessarily.

4. Choose models using your own workload

59API offers low-cost, pay-as-you-go access to multiple model families through an OpenAI-compatible interface. You can evaluate DeepSeek V4 Flash for latency-sensitive requests and Claude Sonnet 5.5 for more demanding tasks, then choose using measured quality, latency, and cost.

Its offering uses native, official-quality models without downgrades. Still, compare outputs on representative prompts before choosing a default, and verify feature support per model: streaming, tool calling, structured output, and token-limit parameters can differ.

5. Put limits around tools, retries, and spending

• Control usage: enforce per-user quotas and rate limits using shared storage rather than process memory in a serverless deployment.
• Bound generation: set a supported output-token limit and reserve context space for the response. Trim or summarize older conversation turns.
• Handle failures: apply timeouts and bounded retries for transient errors. Avoid automatically restarting a response after text has already reached the user.
• Validate actions: treat model output as untrusted. Validate tool arguments, check authorization, and require confirmation before consequential actions.

6. Measure quality and cost before launch

Record request duration, time to first token, selected model, token usage when available, and error categories. Avoid logging API keys or full conversations by default. Test expired sessions, upstream failures, cancellations, and deployment timeout limits.

Track cost per successful task alongside response quality. When you are ready to test your integration, sign up for 59API and start with a small evaluation budget. Its pay-as-you-go pricing keeps experimentation accessible, and its referral rebate offers an additional benefit when recommending the service.

Tarifs · Docs