← Volver a las guías

Integrate Claude and GPT in Next.js with 59API

Build an LLM-powered Next.js app without overpaying

If you want to add AI to a Next.js app, the cleanest pattern is to keep the model call on the server and let the browser talk to your own API route. That gives you control over prompts, auth, rate limits, and cost. With 59API, you can point an OpenAI-compatible SDK at https://api.59api.com and access Claude Opus/Sonnet/Haiku/Fable and GPT models on a pay-as-you-go basis, which is ideal for prototypes and production features alike.

What makes 59API especially useful is that it is not a downgrade layer. You get native, official-quality models, cheap relay pricing, and a referral rebate. That means you can test a feature, ship it, and still keep token spend predictable.

1. Create the app and install the SDK

Start with a standard Next.js app router project and install the OpenAI SDK, since 59API is compatible with it.

Example setup: npx create-next-app@latest my-ai-app && cd my-ai-app && npm install openai

Then add your key to .env.local as API_59API_KEY=your_key_here. Keep it server-side only. Do not expose it through a client component.

2. Create a server route that calls 59API

The key idea is simple: your browser sends the chat message to /api/chat, and the route handler forwards that request to 59API. This keeps the API key out of the frontend and makes it easy to swap prompts or models later.

app/api/chat/route.ts: import OpenAI from 'openai'; const client = new OpenAI({ apiKey: process.env.API_59API_KEY, baseURL: 'https://api.59api.com' }); export async function POST(req: Request) { const { messages } = await req.json(); const completion = await client.chat.completions.create({ model: 'your-chosen-model', messages }); return Response.json({ text: completion.choices[0]?.message?.content ?? '' }); }

For a first test, keep the system prompt short and the user prompt direct. If you are building a support assistant, a product summarizer, or a coding helper, the same route can serve all three by changing only the prompt payload.

3. Build a minimal client UI

In the page component, maintain a text input and submit messages to your route. The client should never know your relay key. It only needs to know where to send the request.

app/page.tsx: const res = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [{ role: 'user', content: input }] }) }); const data = await res.json(); setAnswer(data.text);

You can expand this into a conversation array by storing previous turns in state. When a user sends a second message, append it to the list so the model sees context. That is enough to turn a single prompt demo into a real chat flow.

4. Choose the right model for the job

Model choice matters more than most teams expect. Use a faster, cheaper model for simple classification, summarization, or autocomplete. Use a stronger model for multi-step reasoning, agent-like flows, or content generation. Because 59API exposes Claude and GPT models through one relay, you can compare quality and latency without rewriting your app.

• Claude Haiku for quick responses and lower token spend
• Claude Sonnet for balanced quality in product features
• Claude Opus for deeper reasoning and more complex tasks
• GPT models when you want to match existing OpenAI-style workflows

If you are already using Claude Code, Codex, or another OpenAI SDK-based tool, this compatibility is a big win: the same endpoint pattern can support your Next.js app and your internal developer tooling.

5. Keep costs and latency under control

Once the feature works, optimize for real usage. Trim long system prompts, summarize old conversation turns, and set a sensible output limit. For most app features, the biggest cost savings come from choosing the right model at the right time, not from rewriting the whole stack.

• Cache repeated answers when the prompt is stable
• Use server-side validation before calling the model
• Log token usage and response times per route
• Route lightweight tasks to cheaper models first

This is where 59API stands out: cheap pay-as-you-go access means you can iterate fast without committing to a heavy fixed bill, and the referral rebate is a nice bonus once you start sharing the workflow with teammates or clients.

Ship your Next.js AI feature faster

If you want a practical way to integrate LLMs into a Next.js app, the pattern above is the one to copy: client UI, server route, OpenAI-compatible SDK, and a relay that keeps costs low. For teams building MVPs, internal tools, or customer-facing chat features, 59API is a smart way to get official-quality Claude and GPT access without paying more than you need to.

If you are ready to test it in your own app, sign up for 59API and wire your first route today.

Precios · Docs