← Volver a las guías

Next.js LLM Integration: Fix API and Streaming Issues

Integrating LLMs into a Next.js app starts with a server endpoint that receives a message, calls a model, and returns an answer. Most problems appear at the boundaries: exposed credentials, incorrect API configuration, mismatched streaming formats, and deployment timeouts. This troubleshooting guide covers a practical setup using the App Router and 59API.

How do I connect Next.js to an LLM securely?

Keep the provider request on your server. The browser should call your own endpoint, such as /api/chat, while a Route Handler calls the LLM. This keeps credentials out of browser bundles and gives you a place to enforce authentication, usage limits, and input validation.

• Install the OpenAI JavaScript SDK with npm install openai.
• Add FIFTYNINE_API_KEY, FIFTYNINE_BASE_URL, and LLM_MODEL to .env.local. Never prefix the secret with NEXT_PUBLIC_.
• 59API's API host is https://api.59api.com. Copy the complete OpenAI-compatible base URL from its documentation or dashboard, including any required version path.
• Create app/api/chat/route.ts and export an asynchronous POST handler. Read the request with request.json(), then validate the message before calling the SDK.

Initialize the SDK with new OpenAI({ apiKey: process.env.FIFTYNINE_API_KEY, baseURL: process.env.FIFTYNINE_BASE_URL }). Read the model identifier from your server configuration. For example, you might evaluate Gemini 2.5 Flash for short assistant replies or Claude Sonnet 5.5 for coding tasks. Copy each model's exact API identifier from 59API; a display name is not necessarily its request identifier.

What should the first working request return?

Start without streaming. Call client.chat.completions.create() with your configured model and a messages array containing an object with role set to user and content set to the validated message. Read completion.choices[0]?.message?.content, then return JSON using Response.json({ text }).

From your client component, POST JSON to /api/chat with Content-Type set to application/json. Check response.ok before reading response.json(), and display the returned text. This establishes a simple request-and-response contract before adding streaming or conversation history.

Why am I getting 401, 404, or model errors?

• 401 or 403: Confirm that the server reads the intended key and that the account has permission to use the selected model. Check environment configuration in both development and deployment.
• 404: Inspect the full request URL. A missing or duplicated version segment can send an otherwise valid request to the wrong endpoint.
• Model unavailable: Verify the exact model identifier, account access, and endpoint support. SDK compatibility does not guarantee every model supports every optional parameter.
• Local works, production fails: Configure secrets in your hosting dashboard and redeploy. Your local .env.local file does not configure the deployed application.

Log the upstream status and request identifier when available. Keep API keys, full prompts, and raw provider error objects out of client responses.

Why does streaming fail or arrive all at once?

Setting stream: true changes how you consume the SDK response. Iterate over the returned stream and extract text from chunk.choices[0]?.delta?.content. Forward those text fragments through a Web ReadableStream.

Match the browser reader to the response format. A plain text stream needs incremental decoding with TextDecoder; server-sent events need event framing and parsing. Calling response.json() on a text stream will fail. If output arrives in one burst, inspect buffering in your route, proxy, and hosting platform. Cancel the upstream request when the browser disconnects to avoid unnecessary generation charges.

How do I handle timeouts and control costs?

Check your hosting platform's function-duration limits and apply a request deadline. Streaming improves perceived responsiveness, but it does not remove execution limits. For rate limits and temporary upstream failures, use bounded retries with backoff, respect Retry-After when present, and avoid automatic retries after output has started.

Authenticate users, enforce per-user quotas, cap message length, and send only necessary conversation history. Set an output limit supported by the selected model. Track token usage where available rather than estimating cost from request count alone.

Why use 59API for a Next.js app?

59API offers low-cost, pay-as-you-go access to multiple model families through an OpenAI-compatible interface, using native official-quality models without downgrading. This makes it practical to compare models while keeping your SDK integration consistent. Compare current rates for your expected input and output usage, and review the referral rebate terms if you plan to recommend the service. Sign up for 59API when you are ready to test your first server-side request.

Precios · Docs