Next.js 14でTodoアプリを作る – 3.Honoの初期設定

投稿者：HIROKI CHIYODA

インストール

まずはプロジェクトtodo-app-d1-baseにHonoをインストールします。

https://www.npmjs.com/package/hono

以下のコマンドを実行します。

npm i hono

Hello Next.js!

Honoのドキュメントを参考にして、Hello Next.js!をJSON形式で表示するAPIを作成します。

https://hono.dev/getting-started/vercel#_2-hello-world

まずは、ファイルapp/api/[[...route]]/route.tsを作成します。
元々あったapp/api/route.tsは削除します。
そして作成したファイルに以下のコードを追加します。

import { Hono } from 'hono'
import { handle } from 'hono/vercel'

export const runtime = 'edge'

const app = new Hono().basePath('/api')

app.get('/hello', (c) => {
  return c.json({
    message: 'Hello Next.js!',
  })
})

export const GET = handle(app)
export const POST = handle(app)

上記のコードはHonoフレームワークとVercelを使用してNext.jsアプリケーションのAPIサーバーを作成するコードです。
ここから詳しく見ていきます。

import { Hono } from 'hono'
import { handle } from 'hono/vercel'

Honoモジュールとhono/vercelモジュールを読み込みます。

export const runtime = 'edge'

アプリケーションがVercelのエッジサーバーで実行されることを指定します。

const app = new Hono().basePath('/api')

Honoアプリケーションを作成します。
このジェネリック型はアプリケーションで使用されるバインディングの種類を指定します。
この場合、Bindings型は、アプリケーションで使用されるすべてのバインディングを定義するインターフェースです。
.basePath('/api')はアプリケーションのベースパスを設定します。
ベースパスはすべてのAPIエンドポイントのプレフィックスとして使用されます。
わかりやすいように具体例から見ていきます。
たとえば、デプロイ先のURLがhttps://www.example.com/だとします。
すると、https://www.example.com/api/がベースパスになります。
このベースパスがAPIの入り口となります。

app.get('/hello', (c) => { ... })

GETリクエストのためのルーティングを設定します。
この場合はベースパスhttps://www.example.com/api/の後に/helloを付けることでアクセスできます。

c.json({ message: 'Hello Next.js!' })

/api/helloというURLにアクセスされたときにでJSON形式でレスポンスを返します。

export const GET = handle(app)
export const POST = handle(app)

handle(app)は、HonoアプリケーションをVercelと統合するために使用されます。

デプロイ

プロジェクトをデプロイします。
以下のコマンドを実行します。

npm run pages:deploy

デプロイしたら、表示されたURLから移動します。

https://todo-app-d1-base.pages.dev/

URLの後にapi/hello/を追加します。

https://todo-app-d1-base.pages.dev/api/hello/

以下のように、JSON形式で表示されます。

{"message":"Hello Next.js!"}

これで、単純なAPIが作成できました。