← Retour aux guides

Integrate LLMs into Next.js with 59API

Integrating LLMs into a Next.js app

Adding an LLM to a Next.js application involves more than sending a prompt. You also need to protect credentials, validate user input, handle provider errors, and keep usage costs visible. This tutorial builds a small server-side chat endpoint using the OpenAI SDK and 59API, which provides pay-as-you-go access to GPT and Claude models through an OpenAI-compatible API.

1. Create an API key and install the SDK

Sign up for 59API, create an API key, and choose a model available to your account. 59API uses the base URL https://api.59api.com. Its relay offers official-quality models, including Claude Opus, Sonnet, Haiku, and Fable, as well as GPT models. Pay-as-you-go pricing can be useful while prototyping or serving workloads with uneven traffic; a referral rebate is also available.

In your Next.js project, install the OpenAI JavaScript SDK with npm install openai. Add your credentials to a local .env.local file:

OPENAI_API_KEY=your_59api_key
OPENAI_BASE_URL=https://api.59api.com
LLM_MODEL=your_selected_model

Use the exact model identifier shown in your 59API account or documentation. Keep this file out of version control, and add the variables to your deployment provider's server-side environment settings before production.

2. Add a server-side route handler

Create app/api/chat/route.ts. Keeping the SDK call in a route handler means the browser never receives your API key. It also gives you one place to validate requests and enforce application rules.

Import OpenAI from openai, then create a client using apiKey: process.env.OPENAI_API_KEY and baseURL: process.env.OPENAI_BASE_URL. Export an async POST function that reads the request JSON, checks that the prompt is a non-empty string, and returns a 400 response when validation fails. Call client.chat.completions.create with the configured model and a messages array containing a system instruction and the user's prompt. Return the first choice's message content as JSON.

Before calling the provider, check that the required environment variables are set. Wrap the request in try/catch; log diagnostic details on the server, but return a generic 500 response to the browser. Avoid returning API keys, raw provider errors, or sensitive prompts in logs. For a public app, also add authentication, rate limiting, and a maximum prompt length to limit abuse and unexpected spend.

3. Connect a simple client

In a client component, keep the prompt, response, and loading state in React state. On form submission, send a JSON POST request to /api/chat with fetch, passing the prompt in the request body. Disable the submit button while the request is running, check response.ok, and display the returned answer. Show a clear error message if the network request fails, and reset the loading state in a finally block.

Render model output as text by default. If you later support Markdown or HTML, sanitize untrusted output before rendering it; an LLM response is not automatically safe to insert into the page.

4. Test failures and manage cost

Test the route with a short prompt, then verify that a missing key, invalid request body, and provider error produce useful responses without exposing secrets. Start with a lower-cost model for routine tasks, and use a more capable model only where its quality makes a measurable difference. Track token usage and latency, set provider or application spending limits where available, and avoid resending long conversation histories unnecessarily.

For streaming responses, adapt the route and client to consume a streamed response rather than waiting for the full completion. Confirm the chosen model supports the requested behavior before shipping it.

5. Choose a model provider that fits

Separating the provider call behind a Next.js route makes future model changes easier: update the server configuration and test the replacement without exposing credentials to the client. 59API is a practical option when you want low-cost, pay-as-you-go access to native Claude and GPT models through a familiar OpenAI SDK interface. If that fits your project, sign up for 59API and try the integration with a small, measured workload first.

Tarifs · Docs