← Retour aux guides

Add LLMs to Next.js with 59API: A Fast Start

Adding an LLM to a Next.js app takes three pieces: a server-side API key, a route that calls the model, and a client component that displays the answer. This quick-start uses the App Router, TypeScript, and the OpenAI SDK to build a small prompt-and-response interface.

59API provides low-cost, pay-as-you-go access to multiple model providers through one relay. Its OpenAI SDK compatibility makes it convenient for this setup, while native, official-quality models without downgrades make it an appealing option for cost-conscious developers.

1. Create the app and install the SDK

Run npx create-next-app@latest llm-starter and choose TypeScript and the App Router. Enter the project directory, then run npm install openai. The examples below assume an app directory at the project root; use src/app instead if you selected that layout.

Create .env.local with these three variables:

• LLM_API_KEY: your 59API API key.
• LLM_BASE_URL: the full OpenAI-compatible base URL shown in your account. The service base is https://api.59api.com; preserve any version suffix specified by the endpoint documentation.
• LLM_MODEL: the exact API model identifier from the model catalog.

For example, consider Gemini 2.5 Flash or DeepSeek V4 Flash, subject to your application's latency and quality tests. Copy the catalog's API identifier rather than assuming the display name is a valid request value. Keep credentials out of variables prefixed with NEXT_PUBLIC_, which are exposed to the browser.

2. Add the server route

Create app/api/chat/route.ts with the following code. It validates input, limits the requested output, and keeps provider credentials on the server.

import OpenAI from 'openai';

Use this complete route implementation:

import OpenAI from 'openai'; export async function POST(request: Request) { const body = await request.json().catch(() => null); const prompt = body?.prompt; if (typeof prompt !== 'string' || !prompt.trim() || prompt.length > 4000) { return Response.json({ error: 'Enter a prompt of 1–4,000 characters.' }, { status: 400 }); } const apiKey = process.env.LLM_API_KEY; const baseURL = process.env.LLM_BASE_URL; const model = process.env.LLM_MODEL; if (!apiKey || !baseURL || !model) { return Response.json({ error: 'Missing server configuration.' }, { status: 500 }); } try { const client = new OpenAI({ apiKey, baseURL, timeout: 25000, maxRetries: 0 }); const result = await client.chat.completions.create({ model, messages: [{ role: 'user', content: prompt }], max_tokens: 500 }); return Response.json({ text: result.choices[0]?.message.content ?? '' }); } catch { return Response.json({ error: 'Generation failed. Please try again.' }, { status: 502 }); } }

This example uses Chat Completions and max_tokens. Confirm that your selected model supports that endpoint and parameter. Some models require different token controls. The generic error response avoids exposing upstream request details.

3. Connect a client component

Replace app/page.tsx with this minimal interface:

'use client'; import { useState } from 'react'; export default function Page() { const [prompt, setPrompt] = useState(''); const [answer, setAnswer] = useState(''); const [busy, setBusy] = useState(false); async function generate() { setBusy(true); setAnswer(''); try { const response = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }) }); const data = await response.json(); if (!response.ok) throw new Error(data.error || 'Request failed.'); setAnswer(data.text); } catch (error) { setAnswer(error instanceof Error ? error.message : 'Request failed.'); } finally { setBusy(false); } } return <main> <textarea aria-label="Prompt" maxLength={4000} value={prompt} onChange={event => setPrompt(event.target.value)} /> <button disabled={busy || !prompt.trim()} onClick={generate}>{busy ? 'Generating…' : 'Generate'}</button> <p style={{ whiteSpace: 'pre-wrap' }} aria-live="polite">{answer}</p> </main>; }

4. Test locally, then control production spending

Run npm run dev, open the local app, and submit a short prompt. Check that an empty prompt is rejected and a failed request restores the button. Restart the development server after changing environment variables.

Before public deployment, require authentication and enforce per-user rate limits in the server route. A hidden API key does not prevent visitors from repeatedly calling your endpoint. Configure deployment secrets separately and ensure your hosting timeout accommodates the upstream request.

• Track input tokens, output tokens, latency, and errors without recording sensitive prompts.
• Keep conversation history bounded; resending long transcripts increases token usage.
• Compare models using representative tasks and cost per successful result.
• Add streaming when faster visible feedback matters; this starter returns one complete response.

59API's pay-as-you-go pricing lets you start small and adjust model choices as usage grows. If this setup fits your project, sign up for 59API and test a modest workload before expanding. Its referral rebate can provide an additional benefit when recommending the service to other developers.

Tarifs · Docs