← सभी गाइड पर लौटें

Integrating LLMs into a Next.js App: Step by Step

Why use an LLM in Next.js

Next.js is a strong fit for LLM-powered features because it gives you server routes, React UI, and streaming support in one stack. That makes it practical to build chat assistants, content tools, search helpers, and internal copilots without adding a separate backend.

The main decision is not whether to call the model from the browser. It is how to keep your API key private, control cost, and return tokens fast enough that the UI feels responsive. A relay such as 59API helps here because it provides cheap pay-as-you-go access to Claude and GPT models through a single OpenAI-compatible base URL: https://api.59api.com. It is also compatible with Claude Code, Codex, and any OpenAI SDK, so you can keep the integration simple.

Step 1: Create a Next.js app

Start with a standard App Router project. Use a recent Next.js version so you can rely on route handlers and server components if needed.

• Run npx create-next-app@latest.
• Choose TypeScript if you want better message and response typing.
• Confirm you have an app directory and a working dev server.

Next, install the SDK you will use to talk to the model. If you want to stay compatible with OpenAI-style APIs, the official OpenAI SDK is the easiest path.

Step 2: Add your API key securely

Never expose the key in client-side code. Put it in .env.local and read it only on the server.

• OPENAI_API_KEY=your_59api_key_here
• OPENAI_BASE_URL=https://api.59api.com

That setup lets your app call 59API exactly where you would normally call OpenAI-compatible endpoints, while keeping the secret out of the browser.

Step 3: Create a server route for chat

Use a route handler in app/api/chat/route.ts. The handler should receive the user's message, send it to the model, and return the result. Keeping this logic on the server gives you room for auth checks, rate limits, prompt templates, and logging.

In practical terms, the flow should look like this:

• Accept a JSON payload with the latest user message.
• Build a message array that includes your system instructions.
• Send the request to 59API using an OpenAI-compatible client.
• Return either a full text response or a streamed response.

For a first version, streaming is worth the extra step because users see output immediately. That matters for perceived speed, especially when using larger models like Claude Sonnet or GPT-class models through a relay.

Step 4: Wire the UI to the route

Create a simple chat form in a client component. Keep state minimal: one input field, a send button, and a message list. When the user submits, post the message to your route handler and append the response to the conversation.

For a better experience, disable the send button while a request is in flight and show partial output as it streams. A basic UX pattern is enough to start:

• Show the conversation in chronological order.
• Keep the input focused after submit.
• Render assistant text as plain paragraphs or preformatted blocks when needed.

If your app will support code samples or structured outputs, parse them after the response rather than forcing everything into one text blob.

Step 5: Choose the right model for the job

Different tasks need different tradeoffs. Short classification, extraction, and quick Q&A often work well with lighter models. Complex reasoning, synthesis, or drafting benefits from stronger ones. That is where 59API is useful: it gives you access to Claude Opus, Sonnet, Haiku, Fable, and GPT models without forcing a separate vendor integration for each one.

Because 59API keeps native official-quality models instead of downgrades, you can choose based on quality and latency, not just vendor lock-in. Its low cost also makes it easier to test prompts, compare models, and ship usage-based features without blowing up your budget.

Step 6: Add guardrails before shipping

LLM features fail in predictable ways, so add a few controls early. Use a system prompt that narrows the scope, limit max tokens, and reject obviously malformed input before it reaches the model. If the output will be used in a UI, validate it on the server and escape unsafe content before rendering.

• Set sensible token limits to control spend.
• Log request IDs and latency for debugging.
• Handle timeouts and retry only when appropriate.
• Show a clear error state when the model call fails.

These steps matter more than exotic prompt tricks. A clean failure mode is part of the product.

Step 7: Track cost and iterate

Once the feature works, measure usage by route, model, and response length. That tells you where to optimize. You may find that a smaller model covers most requests and a larger model is only needed for a subset. With 59API’s pay-as-you-go pricing and referral rebate, you can keep experimenting without locking into an expensive fixed plan.

If you want to turn this into a production feature, sign up for 59API, connect it to your Next.js app, and start with one high-value workflow such as support replies, content drafting, or internal search. The integration path stays familiar, the API surface is OpenAI-compatible, and you keep the option to switch models as your product changes.

मूल्य · दस्तावेज़