はじめに
先日、Next.js で Hono を使った API 実装を行いました 🫐
モダンな Web アプリケーションにおいて、効率的で型安全な API 連携は重要な要素です。
今回は、Next.js での Hono の使い方について調査したので、基礎的な内容をまとめました！
時間の節約になれば、嬉しいです 🙌
Hono とは？
高速、軽量、Web 標準に基づいて構築されています。任意の JavaScript ランタイムをサポートします。
Hono は、小さく、シンプルで超高速な Web フレームワークです。
Express.js のような書き方で Web アプリケーションを作れるのが特徴です！
import { Hono } from "hono";
const app = new Hono();
app.get("/", (c) => c.json({ message: "Hello, Hono!" }));
export default app;
そして、Hono は、Cloudflare Workers、Deno、Bun、Vercel、AWS Lambda、Node.js など、
さまざまな JavaScript ランタイムで動作します。
主な特徴として：
- 軽量・高速：エッジ環境でも優れたパフォーマンスを発揮
-
Web 標準準拠：
Request/Responseを扱うシンプルな設計 - TypeScript サポート：型安全な開発が可能
- 豊富なミドルウェア：公式で多様なミドルウェアを提供
Next.js とも組み合わせることが可能です 👍
Web 標準という共通言語
上記にて、わかりやすくまとめられていますが、：
Hono が Next.js で動く理由は、
両者が Web 標準の Request / Response を扱うからです。
- Next.js の Route Handlers は、
Requestを受け取りResponseを返す関数を要求する - Hono も同様に、
Requestを渡すとResponseを返すfetchメソッドを持っている
つまり、Hono の fetch メソッドをそのまま Route Handlers にエクスポートするだけで動作します！
Hono + Next.js の使い方
さて、Next.js では、
Route Handlers という機能で、API を実装することができます。
ただ、Next.js の Route Handlers で Hono を使用することも可能です。
実際に、App Router で Hono を導入してみましょう。
1. Hono ライブラリのインストール
npm install hono
もしくは、公式が用意するセットアップコマンドが使用できます：
npm create hono@latest
2. Route Handler の作成
app/api/[[...route]]/route.ts ファイルを作成します：
// app/api/[[...route]]/route.ts
import { Hono } from "hono";
import { handle } from "hono/vercel";
const app = new Hono().basePath("/api");
app.get("/hello", (c) => {
return c.json({ message: "Hello from Hono!" });
});
export const GET = handle(app);
これで /api/hello にアクセスすると、JSON レスポンスが返されます！
意外とシンプルですね 👍
3. RPC 機能で型安全なクライアントの作成
Hono の強力な機能の一つが RPC です。
サーバーの型情報をクライアントと共有することで、型安全な API 呼び出しが可能になります。
// app/api/[[...route]]/route.ts
import { Hono } from "hono";
import { handle } from "hono/vercel";
const app = new Hono()
.basePath("/api")
.get("/hello", (c) => {
return c.json({
message: "Hello from Hono!",
});
})
.get("/hello/:name", (c) => {
const name = c.req.param("name");
return c.json({
message: `Hello ${name} from Hono!`,
});
});
export const GET = handle(app);
export type AppType = typeof app;
↓ Hono のクライアントを作成して、API を呼び出すことができます。
// クライアント側
import { hc } from "hono/client";
import type { AppType } from "@/app/api/[[...route]]/route";
const client = hc<AppType>("/");
// fetch 関数ではなく、Hono のクライアントが使用できます
// 型補完が効く！
const res = await client.api.hello.$get();
const data = await res.json(); // { message: string }
OpenAPI や tRPC を使わずに、
普通の REST API を書くだけで型安全なクライアントが手に入るのは魅力的ですね！
4. POST リクエストには、Zod を使ったバリデーションを行う
Hono では、Zod を使ったバリデーションを行うことができます。
import { Hono } from "hono";
import { handle } from "hono/vercel";
import { z } from "zod";
import { zValidator } from "@hono/zod-validator";
const shema = z.object({
name: z.string(),
});
const app = new Hono()
.basePath("/api")
.post("/hello", zValidator("json", shema), async (c) => {
const body = c.req.valid("json");
return c.json({
message: `Hello ${body.name} from Hono!`,
});
});
export const POST = handle(app);
export type AppType = typeof app;
簡単ですね！
この、zod のミドルウェアは、カスタマイズすることも可能です 😎
なぜ API を Hono で実装するのか？
個人的には、Hono の最大の魅力は、
とてもシンプルで使いやすい点にあると考えています！
- web 標準に基づいて構築されているので、フレームワーク特有の学習コストは
低いです - その割に、得られる恩恵は大きいです
- フルスタックな型安全を簡単に実現 🛡️
Next.js, Zod、、などの技術とも、
簡単に組み合わせられるように構築されていて、便利ですね！
これらを使用すれば、
入力値の検証と型推論を同時に行えるため、堅牢な API を構築できます。
また、Next.js の Route Handlers は、
素の Request でパスやメソッドを見て処理分岐するのが大変ですが、Hono を使えば、より宣言的にルーティングを記述できます。
コードの見通しが良くなり、メンテナンス性も向上しますね 😎
tRPC が実現していた、TypeScript ファーストのフルスタックな開発を、
Hono では大幅に使いやすく提供している印象です！
おわりに
最後まで読んでいただき、ありがとうございます 🥳
下記の、React コミュニティ（勉強会/共同開発）での、振り返りのような記事ですが、
少しでも参考になれば、嬉しいです！
そして、もし、間違いや補足情報などがありましたら、
ぜひコメントを追加してください！
Happy Hacking :)
参考
Discussion