Next.js App Router × Hono がもたらす開発革命
Next.jsのRoute Handlersは強力ですが、エンドポイント増加に伴うボイラープレートや型共有の煩雑さが課題になりがちです。
Web標準準拠の超軽量フレームワーク「Hono」をAPIレイヤーに組み込むことで、洗練されたエンドツーエンドの型安全RPC（Remote Procedure Call）環境が手軽に完成します。
Step 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);
Step 2: hc による型安全データフェッチ
サーバー側のルート定義（AppType）をクライアントでそのまま型としてインポートできるのがHonoの大きな強みです。
// クライアント側コンポーネント
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(); // 返り値の型が自動推論される
}
本番運用の3大ポイント
- Edge Runtimeの活用: コールドスタートを最小化し低レイテンシを実現。
- OpenAPI自動生成:
@hono/zod-openapiでドキュメントを完全自動出力。 - エラー統一:
app.onError()で全APIのエラー形式を一元管理。