Vercel

Vercel はフロントエンド開発者のためのプラットフォームで、イノベーターがインスピレーションの瞬間に制作をするために必要なスピードと信頼性を提供します。 このセクションでは Vercel 上で実行される Next.js 紹介します。

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

Next.js では Edge Functions を使用して Vercel などのエッジランタイムに動的 API を作成できます。 Hono を使用すると、他のランタイムと同じ構文で　API を記述し、多くのミドルウェアが使用できます。

1. セットアップ

Next.js 向けのスターターもあります。 "create-hono" コマンドで始めましょう。 Select nextjs template for this example.

npm

npm create hono@latest my-app

yarn

yarn create hono my-app

pnpm

pnpm create hono my-app

bun

bunx create-hono my-app

deno

deno run -A npm:create-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 に書いてください。 Supported HTTP Methods も参照してください。

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)

Pages Router を使用している場合は pages/api/[[...route]].ts に記述します。

import { Hono } from 'hono'
import { handle } from 'hono/vercel'
import type { PageConfig } from 'next'

export const config: PageConfig = {
  runtime: 'edge',
}

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

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

export default handle(app)

3. Run

開発サーバーをローカルで動かし、ブラウザで 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 連携でデプロイ出来ます。

Node.js

Node.js ランタイム上の Next.js で Hono を使うことも出来ます。

App Router

For the App Router, you can simply set the runtime to nodejs in your route handler:

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

export const runtime = 'nodejs'

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

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

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

Page Router

For the Page Router, you'll need to install the Node.js adapter first:

npm

npm i @hono/node-server

yarn

yarn add @hono/node-server

pnpm

pnpm add @hono/node-server

bun

bun add @hono/node-server

次に、 @hono/node-server/vercel からインポートした handle を使用します:

import { Hono } from 'hono'
import { handle } from '@hono/node-server/vercel'
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 from Hono!',
  })
})

export default handle(app)

In order for this to work with the Page Router, it's important to disable Vercel node.js helpers by setting up an environment variable in your project dashboard or in your .env file:

NODEJS_HELPERS=0