Vercel

Vercelは、フロントエンド開発者向けのプラットフォームであり、革新者が必要とする速度と信頼性を提供して、ひらめいた瞬間に創作できるようにします。このセクションでは、Vercel上で動作するNext.jsを紹介します。

Next.jsは、高速なWebアプリケーションを作成するためのビルディングブロックを提供する、柔軟性の高いReactフレームワークです。

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

1. セットアップ

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

npm create hono@latest my-app

yarn create hono my-app

pnpm create hono my-app

bunx create-hono my-app

deno run -A npm:create-hono my-app

my-appディレクトリに移動し、依存関係をインストールします。

npmyarnpnpmbun

cd my-app
npm i

cd my-app
yarn

cd my-app
pnpm i

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'

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. 実行

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

npmyarnpnpmbun

npm run dev

yarn dev

pnpm dev

bun run dev

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

4. デプロイ

Vercelアカウントをお持ちの場合は、Gitリポジトリをリンクすることでデプロイできます。

Node.js

Node.jsランタイム上で動作するNext.jsでもHonoを実行できます。

まず、Node.jsアダプターをインストールします。

npm i @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)

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

NODEJS_HELPERS=0

Vercel ​

1. セットアップ ​

2. Hello World ​

3. 実行 ​

4. デプロイ ​

Node.js ​