Revolución del desarrollo provocada por Next.js App Router × Hono

Los controladores de ruta de Next.js son poderosos, pero la complejidad del intercambio de tipos y texto estándar que viene con el aumento de los puntos finales tiende a ser un problema.

Al incorporar el marco ultraligero “Hono” que cumple con los estándares web en la capa API, puede crear fácilmente un entorno RPC (llamada a procedimiento remoto) sofisticado de extremo a extremo y con seguridad de tipos.

Paso 1: Inicialización de Hono con ruta general

Coloque una ruta comodín en App Router y delegue todo /api/* a 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);

Paso 2: obtención de datos con escritura segura con hc

Una de las principales ventajas de Hono es que la definición de ruta del lado del servidor (“AppType”) se puede importar como un tipo en el cliente.

// クライアント側コンポーネント
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(); // 返り値の型が自動推論される
}

Tres puntos principales para la operación de producción.

1. Uso de Edge Runtime: minimice los arranques en frío y consiga una latencia baja.
2. Generación automática de OpenAPI: genera documentación de forma completamente automática con @hono/zod-openapi.
3. Unificación de errores: administre de forma centralizada los formatos de error para todas las API con app.onError().