Next.js Route HandlersでHonoを使う

Next.jsのRoute HandlersとHonoを組み合わせて シンプルで型安全なAPIを作成する方法を、以下の素晴らしい記事で拝見したのでやってみました😺
https://blog.stin.ink/articles/hono-nextjs-and-web-standard

1. HonoでAPIエンドポイントを作成:
   app/api/[...route]/route.tsに、ユーザー情報を取得するAPIエンドポイントを定義します。HonoでのAPIはシンプルで、getやpostメソッドを使って、ルートとハンドラーを定義できます。

   import { getUser, getUsers } from "@/data/users";
   import { Hono } from "hono";
   
   const app = new Hono();
   
     .basePath("/api")
   
     .get("/users", async (c) => c.json(await getUsers()))
     .get("/users/:id", async (c) => {
       const user = await getUser(c.req.param("id"));
       return user ? c.json(user) : c.json({ message: "User not found" }, 404);
     });
   
   export const GET = app.fetch;
   export type HonoAppType = typeof app;
   

2. 型安全なクライアントコード:
   honoClientを使って、APIを呼び出すクライアントコードを型安全に作成します。HonoAppTypeを型として指定することで、APIリクエストが型安全に行えます。

   import { hc } from "hono/client";
   import { HonoAppType } from "./api/[...route]/route";
   
   export const honoClient = hc<HonoAppType>("/"); // ローカルの場合は"http://localhost:3000"
   

3. APIの呼び出し:
   honoClientを使って型安全にAPIにリクエストを送ります。例えば、ユーザー一覧を取得するコンポーネントは次のように記述できます。

   import { honoClient } from "../some-client";
   
   export async function GetUsers() {
     const response = await honoClient.api["users"].$get();
     const data = await response.json();
   
     return (
       <div>
         <h1>Users</h1>
         {data.map((user: { id: string; name: string }) => (
           <div key={user.id}>
             <h2>{user.name}</h2>
           </div>
         ))}
       </div>
     );
   }
   

4. 特定のユーザー情報の取得:
   /users/:idのような動的エンドポイントも簡単に呼び出せます。paramを使って、動的パラメータを渡します。

   import { honoClient } from "../some-client";
   
   export async function GetUser() {
     const response = await honoClient.api["users"][":id"].$get({ param: { id: "1" } });
     const data = await response.json();
   
     return (
       <div>
         <h1>User</h1>
         <p>{'name' in data ? data.name : data.message}</p>
       </div>
     );
   }
   

---

こんな感じで、Next.jsのRoute HandlersとHonoを組み合わせて、シンプルで型安全なAPIを作成できます！
コード例はRSCでデータを取得しているのであまりAPIを使う必要はないですが。