Hono.js + Next.js

2026年9月6日

来源教程这一页当时是空的。下面按 Hono 官方和 Next 集成，记一套能用的接法。

route.ts 适合少量接口。接口一多、要共享校验 / 日志 / CORS 时，把 Hono 嵌进一个 catch-all 更干净：路由树、中间件、RPC 类型都还在 Hono 那套里，部署仍跟 Next 走。

安装

pnpm add hono
bash

挂到 /api

app/api/[[...route]]/route.ts（可选 catch-all，/api 本身也能命中）：

import { Hono } from "hono";
import { handle } from "hono/vercel";

const app = new Hono().basePath("/api");

app.get("/health", (c) => c.json({ ok: true }));

app.get("/users/:id", (c) => {
  const id = c.req.param("id");
  return c.json({ id });
});

export const GET = handle(app);
export const POST = handle(app);
export const PUT = handle(app);
export const PATCH = handle(app);
export const DELETE = handle(app);
ts

basePath('/api') 要和文件夹前缀一致，否则匹配会偏一层。

中间件

import { cors } from "hono/cors";
import { logger } from "hono/logger";

app.use("*", logger());
app.use(
  "/admin/*",
  cors({ origin: "https://example.com", credentials: true })
);

app.use("/admin/*", async (c, next) => {
  const token = c.req.header("authorization");
  if (token !== `Bearer ${process.env.ADMIN_TOKEN}`) {
    return c.json({ error: "unauthorized" }, 401);
  }
  await next();
});
ts

分组、app.route('/v1', v1) 和独立 Hono 应用一样。Prisma、Better Auth 的 handler 也可以 app.on(['GET', 'POST'], '/auth/*', ...) 转过去，或继续把 Auth 留在 /api/auth/[...all]。

和 Server Actions 怎么分工

用谁
同站表单、要渐进增强Server Actions
给 App / 第三方的 HTTP APIHono 或 route.ts
只要两三个 webhook单文件 Route Handler 就够

Hono 跑在 Node / Edge 取决于你 export 的 runtime。用 Node API（fs、某些 SDK）时别标 export const runtime = 'edge'。

下一篇：用 Prisma 把 SQL 收成类型安全的客户端。

参考文档