Consolidating AI Gateway Requests into Next.js Route Handlers

When a small team adds AI capabilities, the most common point of failure isn't failing to write the code—it's keys scattered everywhere: one hardcoded in the frontend, one in a test script, and yet another in some teammate's local .env. Anyone can call the API, nobody knows how much is being spent, and nobody can say for sure which model production is actually using.

This article walks through a minimal but practical approach: consolidate all AI gateway requests into Next.js Route Handlers, so the frontend only talks to your own backend. Using an aggregation gateway like ThisToken.AI as an example, we'll cover registration, getting a Key, running your first piece of code, and then adding team collaboration conventions and risk controls.

Why Route Handlers Instead of Direct Frontend Calls

If you call the LLM API directly from the browser, the key must be exposed on the client—which is like posting the company's credit card on a bulletin board. Moreover, whenever you switch providers, adjust rate limits, or add audit logging, you have to modify call sites scattered across various pages.

The value of Route Handlers is that they serve as a natural "chokepoint":

• Keys live only on the server, injected via environment variables and never appear in the browser;
• Switching models or providers only requires changing one place, while the frontend interface stays stable;
• Usage, errors, and auditing are all observable in one location, making reconciliation easy.

For a small team, this makes "who owns what" clear: frontend developers own the UI, backend routes own the models, and managers view bills in the gateway dashboard.

Step 1: Register and Get an API Key

1. Go to the ThisToken.AI website and register a team account;
2. Enter the console, create an API Key, and grant it only the permission scopes it needs;
3. Configure the Key in .env.local in the project root (make sure this file is added to .gitignore):

THISTOKEN_API_KEY=sk-xxxxxxxxxxxxxxxx

Don't agonize over cost numbers upfront—go by the pricing page on the official site. Most gateways bill by usage, so start with small-scale validation before scaling up.

Step 2: Write Your First Route Handler

Create a minimal proxy endpoint in app/api/chat/route.ts:

// app/api/chat/route.ts
import { NextRequest, NextResponse } from "next/server";

const BASE_URL = "https://api.thistoken.ai/v1";

export async function POST(req: NextRequest) {
  try {
    // 1. 鉴权：示例用简单 token，正式项目建议接你自己的用户体系
    const auth = req.headers.get("authorization");
    if (auth !== `Bearer ${process.env.APP_INTERNAL_TOKEN}`) {
      return NextResponse.json({ error: "unauthorized" }, { status: 401 });
    }

    // 2. 只透传白名单字段，别把前端传来的整个对象直接转发
    const body = await req.json();
    const payload = {
      model: body.model ?? "gpt-4o-mini",
      messages: body.messages,
      max_tokens: Math.min(body.max_tokens ?? 500, 1000),
    };

    // 3. 真正的网关调用
    const upstream = await fetch(`${BASE_URL}/chat/completions`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.THISTOKEN_API_KEY}`,
      },
      body: JSON.stringify(payload),
    });

    if (!upstream.ok) {
      // 不要把上游原始错误直接抛给前端，避免泄露细节
      console.error("gateway error:", upstream.status);
      return NextResponse.json({ error: "upstream_error" }, { status: 502 });
    }

    const data = await upstream.json();
    return NextResponse.json({
      reply: data.choices?.[0]?.message?.content ?? "",
    });
  } catch (e) {
    console.error("route error:", e);
    return NextResponse.json({ error: "internal_error" }, { status: 500 });
  }
}

The frontend call becomes very clean:

const res = await fetch("/api/chat", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${process.env.NEXT_PUBLIC_APP_INTERNAL_TOKEN}`,
  },
  body: JSON.stringify({
    messages: [{ role: "user", content: "帮我总结这段周报" }],
  }),
});
const { reply } = await res.json();

After running npm run dev locally, hit /api/chat once with curl or from a page—if you receive the reply field, it works.

Three Things Managers Should Watch

Getting the code running is just the beginning; as a process, responsibilities should be assigned to specific people.

Keys have a single Owner. There is only one gateway Key, stored in the team password manager, with one person responsible for rotation. Route Handlers read from process.env, and no one should ever write the Key into code or the frontend. The standard response to a discovered leak is: immediately revoke in the console → issue a new Key → update the deployment environment variables, all within ten minutes.

Quotas have limits. Set spending limits in the gateway dashboard, and also add a server-side backstop in the route—the max_tokens cap in the code above is the first gate. If a feature gets abused, losses are locked within a predictable range. Most "budget burned dry while still running" incidents happen because nobody defined in advance how much counts as "too much."

Someone reconciles usage. Spend five minutes a week checking call volumes in the gateway dashboard and roughly matching them against business volume: if daily active users haven't grown but calls have doubled, it's most likely an infinite loop or duplicate frontend requests. The advantage of an aggregation gateway is that bills for all models are in one place—no need to dig through each provider's dashboard.

Team Collaboration Conventions

Three rules are enough:

1. The frontend is forbidden from directly calling any model API; all AI calls must go through routes under app/api/;
2. Adding new models goes through configuration, not hardcoding—put model names in environment variables or a config table, so switching doesn't require a release;
3. Code Review must check two things: whether any keys have been brought into client-side code, and whether any pass-through parameters lack limits.

These conventions are tiny, but they turn "AI capabilities" from an individual craft into a team asset: when someone leaves, the code stays; key rotation doesn't affect the business; and bills are easy to understand.

Conclusion

A Next.js Route Handler is essentially just a function running on the server. Using it as the unified entry point for an AI gateway costs almost nothing, yet delivers three things at once: key security, auditability, and replaceability. For an indie developer's first piece of code, getting this working is enough: register an account → get an API Key → copy the route code above → make one local request, and ten minutes later your AI application has its first proper gatekeeper.

If you don't have an account yet, you can register directly here to get started: https://api.thistoken.ai/register

---

Every example in this post runs with a single API key — get yours at https://api.thistoken.ai/register and start in minutes.