Next.js LLM Integration: A 20-Minute 59API Setup
Build a working LLM endpoint first
Integrating LLMs into a Next.js app requires three pieces: a server-side API key, a Route Handler that calls your model, and a client that displays the result. This quick start uses the App Router and OpenAI JavaScript SDK. Start with a single-turn assistant; add streaming and conversation history after the basic request works.
59API provides low-cost, pay-as-you-go access to Claude and GPT models through an OpenAI-compatible interface. That makes it useful for testing different models without rewriting your application’s request layer.
1. Create the app and configure credentials
Use a current Node.js LTS version supported by Next.js. Create your project with npx create-next-app@latest llm-starter --ts --app, enter the directory with cd llm-starter, and install the SDK using npm install openai.
Create .env.local in the project root with these values, each on its own line:
- LLM_API_KEY=your_59api_key
- LLM_BASE_URL=https://api.59api.com/v1
- LLM_MODEL=your_exact_model_id
The service base URL is https://api.59api.com; the example uses the conventional OpenAI-compatible /v1 prefix. Confirm the endpoint prefix and available model identifier in your 59API account before running it. Do not guess model names or assume aliases match another provider’s naming.
Never prefix the key with NEXT_PUBLIC_. Keep it out of browser code and version control. Restart the development server after changing environment variables.
2. Add a server-side Route Handler
Create app/api/chat/route.ts, or src/app/api/chat/route.ts if you selected a src directory. This endpoint validates input, limits output, and returns only the assistant’s text. The example is a local prototype; add authentication and rate limiting before exposing it publicly.
import OpenAI from 'openai'; export const runtime = 'nodejs'; export async function POST(request: Request) { const body = await request.json().catch(() => null); const message = body?.message; if (typeof message !== 'string' || !message.trim() || message.length > 4000) { return Response.json({ error: 'Send a message between 1 and 4000 characters.' }, { status: 400 }); } try { const client = new OpenAI({ apiKey: process.env.LLM_API_KEY, baseURL: process.env.LLM_BASE_URL, timeout: 20000, maxRetries: 1 }); const result = await client.chat.completions.create({ model: process.env.LLM_MODEL!, messages: [{ role: 'system', content: 'Answer clearly and concisely.' }, { role: 'user', content: message.trim() }], max_tokens: 300 }); return Response.json({ text: result.choices[0]?.message.content ?? '' }); } catch { return Response.json({ error: 'The model request failed. Please try again.' }, { status: 502 }); } }
This uses Chat Completions. Select a model that supports that endpoint and its parameters; compatibility does not guarantee every model accepts every optional setting. The 4,000-character check is an application guardrail, not a token limit.
3. Call the endpoint from your interface
In your chat component, add the 'use client' directive and call this helper from a form submission handler:
async function sendMessage(message: string) { const response = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message }) }); const data = await response.json(); if (!response.ok) throw new Error(data.error || 'Request failed'); return data.text as string; }
Store the returned text in React state and render it as plain text. Disable submission while waiting, show a loading indicator, and display errors near the input. Run npm run dev and try a short prompt. An invalid key, incorrect endpoint prefix, or unavailable model ID should be your first checks if it fails.
4. Control costs before deployment
- Protect the route: authenticate users, enforce per-user quotas, and limit request body sizes at your hosting layer.
- Choose models deliberately: start with a lower-cost model for simple tasks; reserve stronger models for requests that need them.
- Bound context: send only necessary conversation history. Longer inputs increase token usage and latency.
- Track usage: record token counts, latency, and error rates without logging keys or sensitive prompts.
59API offers native, official-quality models without downgrading and positions itself among the cheapest relays. Compare current per-model rates against your workload. Its referral rebate can provide additional savings, but should not replace usage controls.
When you are ready to test, sign up for 59API and connect one model to this route. Keep the same server boundary as you add streaming, retrieval, or tool calls.