Vercel

Vercel 是面向前端开发者的平台，它提供创新者所需的快速性和可靠性，以便在灵感涌现时进行创作。本节介绍在 Vercel 上运行的 Next.js。

Next.js 是一个灵活的 React 框架，它提供构建模块来创建快速的 Web 应用程序。

在 Next.js 中，边缘函数允许您在 Vercel 等边缘运行时创建动态 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 浏览器中访问 https://127.0.0.1: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 ​