Vercel

Vercel 是面向前端开发者的平台，提供创新者在灵感迸发时所需的速度和可靠性。本节介绍在 Vercel 上运行的 Next.js。

¥Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. This section introduces Next.js running on Vercel.

Next.js 是一个灵活的 React 框架，可为你提供构建块以创建快速的 Web 应用。

¥Next.js is a flexible React framework that gives you building blocks to create fast web applications.

在 Next.js 中，边缘函数 允许你在 Edge Runtime 上创建动态 API，例如 Vercel。使用 Hono，你可以用与其他运行时相同的语法编写 API 并使用许多中间件。

¥In Next.js, Edge Functions allows you to create dynamic APIs on Edge Runtime such as Vercel. With Hono, you can write APIs with the same syntax as other runtimes and use many middleware.

1. 设置

¥ Setup

Next.js 的启动器可用。使用 "create-hono" 命令启动你的项目。为此示例选择 nextjs 模板。

¥A starter for Next.js is available. Start your project with "create-hono" command. 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

bun create hono@latest my-app

deno

deno init --npm hono my-app

移入 my-app 并安装依赖。

¥Move into my-app and install the dependencies.

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 方法 部分了解更多选项。

¥If you use the App Router, Edit app/api/[[...route]]/route.ts. Refer to the Supported HTTP Methods section for more options.

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。

¥If you use the Pages Router, Edit 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

在本地运行开发服务器。然后，在你的 Web 浏览器中访问 http://localhost:3000。

¥Run the development server locally. Then, access http://localhost:3000 in your Web browser.

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

bun

bun run dev

现在，/api/hello 只返回 JSON，但如果你构建 React UI，则可以使用 Hono 创建一个全栈应用。

¥Now, /api/hello just returns JSON, but if you build React UIs, you can create a full-stack application with Hono.

4. 部署

¥ Deploy

如果你有 Vercel 账户，可以通过链接 Git 仓库进行部署。

¥If you have a Vercel account, you can deploy by linking the Git repository.

Node.js

你还可以在 Node.js 运行时上运行 Next.js 上的 Hono。

¥You can also run Hono on Next.js running on the Node.js runtime.

应用路由

¥App Router

对于 App Router，你只需在路由处理程序中将运行时设置为 nodejs：

¥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)

页面路由

¥Pages Router

对于 Pages Router，你需要先安装 Node.js 适配器：

¥For the Pages 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 函数：

¥Then, you can utilize the handle function imported from @hono/node-server/vercel:

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)

为了使其与 Pages Router 配合使用，重要的是通过在项目仪表板或 .env 文件中设置环境变量来禁用 Vercel Node.js 助手：

¥In order for this to work with the Pages 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