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的錯誤格式。