Next.js

Next.js は、高速な Web アプリケーションを作成するための構成要素を提供する、柔軟な React フレームワークです。

Node.js ランタイムを使う場合、Next.js 上で Hono を実行できます。
Vercel では、Vercel Functions を使って Next.js と Hono を簡単にデプロイできます。

1. セットアップ

Next.js 向けのスターターテンプレートがあります。 「create-hono」コマンドでプロジェクトを開始します。 この例では nextjs テンプレートを選択します。

npm

npm create hono@latest my-app

yarn

yarn create hono my-app

pnpm

pnpm create hono my-app

bun

bun create hono@latest my-app

deno

deno init --npm hono my-app

my-app に移動して依存関係をインストールします。

npm

cd my-app
npm i

yarn

cd my-app
yarn

pnpm

cd my-app
pnpm i

bun

cd my-app
bun i

2. Hello World

App Router を使う場合は、app/api/[[...route]]/route.ts を編集します。他の選択肢については、対応する HTTP メソッドのセクションを参照してください。

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

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

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

export const GET = handle(app)

`handle` comes from the `@hono/vercel` package, which the starter installs. On an existing project, add it with `npm i @hono/vercel`.
export const POST = handle(app)

3. 実行

開発サーバーをローカルで起動し、Web ブラウザーで http://localhost:3000 にアクセスします。

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

bun

bun run dev

現時点では /api/hello は JSON を返すだけですが、React の UI を構築すれば、Hono でフルスタックアプリケーションを作成できます。

4. デプロイ

Vercel アカウントがあれば、Git リポジトリを連携してデプロイできます。

Pages Router

Pages Router を使う場合は、まず Node.js アダプターをインストールする必要があります。

npm

npm i @hono/node-server

yarn

yarn add @hono/node-server

pnpm

pnpm add @hono/node-server

bun

bun add @hono/node-server

続いて、pages/api/[[...route]].ts で @hono/node-server からインポートした getRequestListener 関数を利用できます。

import { getRequestListener } from '@hono/node-server'
import { Hono } from 'hono'
import type { PageConfig } from 'next'

export const config: PageConfig = {
  api: {
    bodyParser: false,
  },
}

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

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

export default getRequestListener(app.fetch)

Pages Router で動作させるには、プロジェクトのダッシュボードまたは .env ファイルで環境変数を設定し、Vercel Node.js ヘルパーを無効にすることが重要です。

NODEJS_HELPERS=0