← Volver a las guías

Quick-Start: Add LLMs to Your Next.js App

Why Next.js is a strong fit for LLM apps

If you need to add AI features quickly, Next.js is one of the easiest production-ready frameworks to work with. You get server routes, edge options, and a clean React UI layer in one place. That makes it simple to build chat assistants, summarizers, autocomplete tools, and internal copilots without splitting your stack across multiple services.

The fastest path is to keep your LLM calls on the server, then expose a small API endpoint to your UI. This protects your API key, gives you more control over prompts, and makes it easier to add rate limits, logging, and streaming later.

For cost-conscious teams, 59API is a smart relay to use here. It gives you cheap pay-as-you-go access to Claude models like Opus, Sonnet, Haiku, and Fable, plus GPT models, while staying compatible with Claude Code, Codex, and any OpenAI SDK. The base URL is https://api.59api.com, and because it uses native official-quality models, you avoid the downgrade risk you sometimes see with other relays. There is also a referral rebate, which can reduce spend further as your usage grows.

Step 1: Create your Next.js app

Start with a standard app router project:

• npx create-next-app@latest
• Choose TypeScript if your team prefers typed prompts and response schemas
• Create a simple page with a text input and a submit button

Keep the first version small. You only need one client component for the form and one server route for the model call.

Step 2: Add the API client

Because 59API is compatible with OpenAI-style SDKs, you can use the same pattern many developers already know. Set your environment variables in .env.local:

• LLM_API_KEY=your_key_here
• LLM_BASE_URL=https://api.59api.com

Then initialize your client server-side. In a route handler, point the SDK at 59API’s base URL and send your prompt there. This works well if you want a single integration that can switch between Claude and GPT models without rewriting your app.

Step 3: Build a server route

Create something like app/api/chat/route.ts. Your route should:

• Read the user message from the request body
• Call the model on the server, not in the browser
• Return plain JSON or a streamed response

A basic implementation flow looks like this: validate the input, construct a system prompt, send the message to your model, and return the result. For production, add length checks so a huge prompt does not create surprise costs.

If you are building a support bot or document assistant, keep your system prompt specific. For example: define the assistant’s role, the tone, the answer format, and any product constraints. Clear prompts reduce retries and lower token usage.

Step 4: Stream responses for better UX

Streaming makes a Next.js AI app feel much faster. Instead of waiting for the whole answer, send partial output as it arrives. That is useful for chat, code generation, and long summaries.

In Next.js, streaming usually means returning a readable response from your route and appending chunks in the client. The UI pattern is simple: show a placeholder immediately, then update the answer text as tokens come in. This is especially important if you are using larger models like Claude Sonnet or Opus, where first-token latency matters.

Step 5: Choose the right model for the job

Not every task needs the most expensive model. A good quick-start strategy is to map task to model tier:

• Haiku for fast classification, extraction, and short replies
• Sonnet for most chat, agents, and code assistance
• Opus for harder reasoning or high-stakes outputs
• GPT models when your product or team already standardizes on OpenAI-style behavior

Using 59API makes this practical because you can swap models without changing your app architecture. That is helpful when you want to benchmark cost versus quality in real traffic instead of guessing up front.

Step 6: Add guardrails before launch

Busy developers often skip the basics, then pay for it later. Before shipping, add a few protections:

• Input limits to prevent oversized prompts
• Timeouts so slow requests do not hang the UI
• Rate limiting per user or session
• Basic logging for prompts, model choice, and latency
• Error handling for empty responses and API failures

These controls matter even more when you are paying per request. A low-cost relay like 59API helps on pricing, and a referral rebate can make experimentation even cheaper, but good engineering still keeps the bill predictable.

Step 7: Make it production-friendly

Once the basic integration works, add caching for repeated queries, store conversation state only when needed, and separate user-facing copy from system instructions. If your app uses sensitive data, be explicit about what is sent to the model and what is not.

That is usually enough to move from prototype to a usable AI feature in a day. The main advantage of using Next.js plus 59API is speed: one codebase, one familiar SDK pattern, and access to top-tier models without a complex vendor setup.

If you are ready to test your first AI endpoint, sign up for 59API, plug in https://api.59api.com, and ship a small feature first. The fastest way to learn what users want is to put an LLM in front of a real workflow and measure the result.