Hono

Appearance

Next.js ​

Next.js 是一个灵活的 React 框架，为您提供构建快速 Web 应用程序的基石。

在使用 Node.js 运行时时，您可以在 Next.js 上运行 Hono。
在 Vercel 上，通过使用 Vercel Functions，可以轻松部署带有 Hono 的 Next.js 应用。

1. 设置 ​

提供了一个 Next.js 入门模板。 使用 "create-hono" 命令启动您的项目。 本示例请选择 nextjs 模板。

sh
npm create hono@latest my-app
sh
yarn create hono my-app
sh
pnpm create hono my-app
sh
bun create hono@latest my-app
sh
deno init --npm hono my-app

进入 my-app 目录并安装依赖。

sh
cd my-app
npm i
sh
cd my-app
yarn
sh
cd my-app
pnpm i
sh
cd my-app
bun i

2. 你好世界 ​

如果您使用 App Router，请编辑 app/api/[[...route]]/route.ts。更多选项请参考 支持的 HTTP 方法 部分。

ts
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)
export const POST = handle(app)

3. 运行 ​

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

sh
npm run dev
sh
yarn dev
sh
pnpm dev
sh
bun run dev

现在，/api/hello 仅返回 JSON，但如果您构建 React UI，则可以使用 Hono 创建全栈应用程序。

4. 部署 ​

如果您拥有 Vercel 账户，可以通过关联 Git 仓库进行部署。

Pages Router ​

如果您使用 Pages Router，首先需要安装 Node.js 适配器。

sh
npm i @hono/node-server
sh
yarn add @hono/node-server
sh
pnpm add @hono/node-server
sh
bun add @hono/node-server

然后，您可以在 pages/api/[[...route]].ts 中使用从 @hono/node-server/vercel 导入的 handle 函数。

ts
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 Next.js!',
  })
})

export default handle(app)

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

text
NODEJS_HELPERS=0