Next.js App Router × Hono 带来的开发革命
Next.js 的路由处理程序很强大，但随着端点的增加，样板文件和类型共享的复杂性往往成为一个问题。
通过将符合Web标准的超轻量级框架“Hono”纳入API层，您可以轻松创建复杂的端到端、类型安全的RPC（远程过程调用）环境。
第 1 步：使用 Catch-all Route 进行 Hono 初始化
在 App Router 中放置通配符路由，并将所有“/api/*”委托给 Hono。
// app/api/[[...route]]/route.ts
import { Hono } from 'hono';
import { handle } from 'hono/vercel';
import { zValidator } from '@hono/zod-validator';
import { z } from 'zod';
export const runtime = 'edge';
const app = new Hono().basePath('/api');
const routes = app.get('/users/:id',
zValidator('param', z.object({ id: z.string() })),
(c) => c.json({ id: c.req.valid('param').id, name: 'Alice' })
);
export type AppType = typeof routes;
export const GET = handle(app);
步骤 2：使用 hc 获取类型安全的数据
Hono 的一个主要优势是服务器端路由定义（“AppType”）可以作为客户端上的类型导入。
// クライアント側コンポーネント
import { hc } from 'hono/client';
import type { AppType } from '@/app/api/[[...route]]/route';
const client = hc<AppType>('http://localhost:3000');
export async function getUser(id: string) {
const res = await client.api.users[':id'].$get({ param: { id } });
return await res.json(); // 返り値の型が自動推論される
}
###生产操作三大要点
- 使用 Edge Runtime：最大限度地减少冷启动并实现低延迟。
- OpenAPI自动生成：使用
@hono/zod-openapi完全自动输出文档。 - 错误统一：通过
app.onError()集中管理所有API的错误格式。