Featured image of post Next.js와 Hono로 만드는 풀 스택 WebAPI 시작Featured image of post Next.js와 Hono로 만드는 풀 스택 WebAPI 시작
편물

Next.js와 Hono로 만드는 풀 스택 WebAPI 시작

  1. 홈
  2. Posts
  3. Next.js와 Hono로 만드는 풀 스택 WebAPI 시작

Next.js App Router × Hono의 개발 혁명

Next.js의 Route Handlers는 강력하지만, 엔드포인트 증가에 따른 보일러 플레이트와 형 공유의 번잡함이 과제가 되기 쉽다.

웹 표준을 준수하는 초경량 프레임워크 “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대 포인트

  1. Edge Runtime 활용: 콜드 스타트를 최소화하여 낮은 대기 시간을 실현.
  2. OpenAPI 자동 생성: @hono/zod-openapi 로 문서를 완전 자동 출력.
  3. 오류 통일: app.onError()로 모든 API의 에러 형식을 일원 관리.
©2022 - 2026 Kaisekukun