Hono + Next.js の紹介と導入

はじめに

先日、Next.js で Hono を使った API 実装を行いました 🫐

モダンな Web アプリケーションにおいて、効率的で型安全な API 連携は重要な要素です。

今回は、Next.js での Hono の使い方について調査したので、基礎的な内容をまとめました！
時間の節約になれば、嬉しいです 🙌

Hono とは？

https://hono.dev/

高速、軽量、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 標準という共通言語

https://blog.stin.ink/articles/hono-nextjs-and-web-standard

上記にて、わかりやすくまとめられていますが、：

Hono が Next.js で動く理由は、
両者が Web 標準の Request / Response を扱うからです。

• Next.js の Route Handlers は、Request を受け取り Response を返す関数を要求する
• Hono も同様に、Request を渡すと Response を返す fetch メソッドを持っている

つまり、Hono の fetch メソッドをそのまま Route Handlers にエクスポートするだけで動作します！

Hono + Next.js の使い方

https://hono.dev/docs/getting-started/vercel

さて、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 機能で型安全なクライアントの作成

https://zenn.dev/yusukebe/articles/a00721f8b3b92e

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 を使ったバリデーションを行う

https://hono.dev/docs/guides/validation

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;

簡単ですね！

https://github.com/honojs/middleware/tree/main/packages/zod-validator

この、zod のミドルウェアは、カスタマイズすることも可能です 😎

なぜ API を Hono で実装するのか？

https://hono.dev/docs/guides/best-practices

個人的には、Hono の最大の魅力は、
とてもシンプルで使いやすい点にあると考えています！

• web 標準に基づいて構築されているので、フレームワーク特有の学習コストは
  低いです
• その割に、得られる恩恵は大きいです
• フルスタックな型安全を簡単に実現 🛡️

https://hono.dev/docs/guides/validation

Next.js, Zod、、などの技術とも、
簡単に組み合わせられるように構築されていて、便利ですね！

これらを使用すれば、
入力値の検証と型推論を同時に行えるため、堅牢な API を構築できます。

また、Next.js の Route Handlers は、
素の Request でパスやメソッドを見て処理分岐するのが大変ですが、Hono を使えば、より宣言的にルーティングを記述できます。

コードの見通しが良くなり、メンテナンス性も向上しますね 😎

tRPC が実現していた、TypeScript ファーストのフルスタックな開発を、
Hono では大幅に使いやすく提供している印象です！

おわりに

最後まで読んでいただき、ありがとうございます 🥳

日々の開発における、個人的な記録のような記事ですが、
少しでも参考になれば、嬉しいです！

主に React を用いた Web 開発について、コツコツ投稿しているので、
よければ、Zenn や X でフォローしていただけると、嬉しいです！

そして、もし、間違いや補足情報などがありましたら、
ぜひコメントを追加してください！

Happy Hacking :)

参考

https://hono.dev/docs/getting-started/vercel
https://blog.stin.ink/articles/hono-nextjs-and-web-standard
https://zenn.dev/yusukebe/articles/a00721f8b3b92e
https://hono.dev/docs/guides/best-practices
https://hono.dev/docs/guides/validation
https://hono.dev/docs/getting-started/nextjs