Next.js

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

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

你可以在使用 Node.js 运行时在 Next.js 上运行 Hono。在 Vercel 上，使用 Vercel 函数可以轻松地将 Hono 与 Next.js 一起部署。

¥You can run Hono on Next.js when using the Node.js runtime.\ On Vercel, deploying Hono with Next.js is easy by using Vercel Functions.

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'

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

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

页面路由

¥Pages Router

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

¥If you use 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

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

¥Then, you can utilize the handle function imported from @hono/node-server/vercel in pages/api/[[...route]].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 助手。

¥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