# @connectrpc/connect-next 中文文档

规范地址：https://npmcn.com/package/%40connectrpc/connect-next/

版本：2\.3\.0
npm 元数据更新时间：2026-10-27T11:24:20.395Z
中文译文更新时间：2026-11-10T15:39:43.405Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40connectrpc/connect-next
原文对照：https://npmcn.com/package/%40connectrpc/connect-next/?lang=original
项目主页：https://github.com/connectrpc/connect-es#readme
源码仓库：https://github.com/connectrpc/connect-es

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：16.9 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- peer 依赖：next ^15\.0\.2 \|\| ^16\.0\.0，@bufbuild/protobuf ^2\.7\.0，@connectrpc/connect 2\.3\.0，@connectrpc/connect-node 2\.3\.0
- 首次发布：2023-08-21T15:15:23.206Z
- 最新版本发布：2026-10-27T11:24:19.800Z
- 近 30 天下载量：352016（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：34（近 12 个月 4 个）

## 中文简介

连接是一个图书馆大家庭,用于在不同语言和平台上建立和消费API,以及 [@ connectrpc/ 连接](https://www.npmjs.com/package/@connectrpc/connect) 将带有Protobuf的安全型API带入TypeScript.

## 安装

```sh
npm install @connectrpc/connect-next
```

也可以使用：`pnpm add @connectrpc/connect-next`、`yarn add @connectrpc/connect-next`、`bun add @connectrpc/connect-next`

## README

# @ connectedrpc/ connected- next (中文(简体) )

连接是一个图书馆大家庭,用于在不同语言和平台上建立和消费API,以及 [@ connectrpc/ 连接](https://www.npmjs.com/package/@connectrpc/connect) 将带有Protobuf的 安全 API 带到 类型脚本 .

`@connectrpc/connect-next` 提供插件 [下一个.js](https://nextjs.org/), (中文(简体) ), 网络反应框架.

### 下一个 JsApiRouter ()

通过 Next.js API 路由提供您的 RPC 连接 。 启用在 Next.js 中的连接, 在您的工程中添加两个文件 :

```diff
.
├── connect.ts
└── pages
    └── api
        └── [[...connect]].ts
```

> **说明:** 您的连接 API 路由需要设置 `pages/`不过你 可以使用 `app/` app路由器同时设置目录.

新文件 `connect.ts` 您的RPC 注册地址 :

```ts
// connect.ts
import { ConnectRouter } from "@connectrpc/connect";

export default function (router: ConnectRouter) {
  // implement rpc Say(SayRequest) returns (SayResponse)
  router.rpc(ElizaService, ElizaService.methods.say, async (req) => ({
    sentence: `you said: ${req.sentence}`,
  }));
}
```

`pages/api/[[..connect]].ts` 是下一个.js [所有 API 路径](https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes)数字 :

```ts
// pages/api/[[..connect]].ts
import { nextJsApiRouter } from "@connectrpc/connect-next";
import { createValidateInterceptor } from "@connectrpc/validate";
import routes from "../../connect";

const { handler } = nextJsApiRouter({
  interceptors: [createValidateInterceptor()],
  routes,
});
export default handler;

// Required: Connect parses request bodies itself, so the Next.js body
// parser must be disabled. Without this, RPCs will fail.
export const config = {
  api: {
    bodyParser: false,
  },
};
```

随着服务器的运行,您可以使用任何连接或gRPC-Web客户端进行请求. 请注意,Next.js服务于您的所有RPC与 `/api` 前缀.

`curl` 与连接协议 :

```bash
curl \
    --header "Content-Type: application/json" \
    --data '{"sentence": "I feel happy."}' \
    --http2-prior-knowledge \
    http://localhost:3000/api/connectrpc.eliza.v1.ElizaService/Say
```

带有 gRPC-web 协议的节点(使用从 [@ connectrpc/ 连接- 节点](https://www.npmjs.com/package/@connectrpc/connect-node):

```ts
import { createClient } from "@connectrpc/connect";
import { createGrpcWebTransport } from "@connectrpc/connect-node";
import { ElizaService } from "./gen/eliza_connect.js";

const transport = createGrpcWebTransport({
  baseUrl: "http://localhost:3000/api",
  httpVersion: "1.1",
});

const client = createClient(ElizaService, transport);
const { sentence } = await client.say({ sentence: "I feel happy." });
console.log(sentence); // you said: I feel happy.
```

网页浏览器的客户端实际上与这个示例完全相同 - 它会 简单的使用 `createConnectTransport` 从 [@ connectrpc/ 连接- web](https://www.npmjs.com/package/@connectrpc/connect-web) 换句话说.

注意对gRPC的支持有限,因为许多gRPC客户需要HTTP/2, 和下一个.js不支持节点.js `http2` 模块.

### 部署到韦尔塞尔

目前, `@connectrpc/connect-next` 不支持 Vercel Edge 运行时间. 它需要节点.js服务器运行时间,在部署时默认使用 到凡尔塞尔.

## 开始

要开始连接,请前往 [文档](https://connectrpc.com/docs/node/getting-started) 用于教学,或查看 [我们的榜样](https://github.com/connectrpc/connect-es/tree/main/packages/example)。 。 。 .

## 常见问题

### @connectrpc/connect-next 是什么？

连接是一个图书馆大家庭,用于在不同语言和平台上建立和消费API,以及 @ connectrpc/ 连接 将带有Protobuf的安全型API带入TypeScript\.

### 如何安装 @connectrpc/connect-next？

在项目目录运行 npm install @connectrpc/connect-next，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（^15\.0\.2 \|\| ^16\.0\.0）、@bufbuild/protobuf（^2\.7\.0）、@connectrpc/connect（2\.3\.0）、@connectrpc/connect-node（2\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @connectrpc/connect-next 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @connectrpc/connect-next 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @connectrpc/connect-next 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @connectrpc/connect-next 可以商用吗？

@connectrpc/connect-next 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @connectrpc/connect-next 的下载量有多少？

根据 npm 官方下载统计，@connectrpc/connect-next 在 2026/10/11 – 2026/11/09 这 30 天内被下载 352,016 次，日均约 11,734 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @connectrpc/connect-next 还在维护吗？

最新版本 2\.3\.0 发布于 2026/10/27（14 天前）；至今共发布 34 个版本，其中过去 12 个月发布了 4 个；首次发布于 2023/08/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。