# @bentonow/bento-nextjs-sdk 中文文档

规范地址：https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/

版本：0\.0\.1-rc3
npm 元数据更新时间：2024-12-28T01:00:01.451Z
中文译文更新时间：2026-11-07T22:43:02.918Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40bentonow/bento-nextjs-sdk
原文对照：https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/?lang=original
项目主页：https://bentonow.com/
源码仓库：https://github.com/bentonow/bento-nextjs-sdk

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

- 包体积（解压后）：38 kB，51 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18\.17\.0
- 运行依赖：0 个
- peer 依赖：next ^12\.0\.0 \|\| ^13\.0\.0 \|\| ^14\.0\.0 \|\| \>=15\.0\.0-rc，react ^17\.0\.0 \|\| ^18\.0\.0 \|\| \>=19\.0\.0-beta
- 首次发布：2024-06-04T04:46:02.134Z
- 最新版本发布：2024-12-28T01:00:01.274Z
- 近 30 天下载量：2288（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

Bento Next.JS SDK和跟踪库

## 安装

```sh
npm install @bentonow/bento-nextjs-sdk
```

也可以使用：`pnpm add @bentonow/bento-nextjs-sdk`、`yarn add @bentonow/bento-nextjs-sdk`、`bun add @bentonow/bento-nextjs-sdk`

## README

# Bento 下一个.js SDK

![](https://app.bentonow.com/brand/logoanim.gif)

> \[TIP\] 需要帮忙吗? 加入我们 [解析器](https://discord.gg/ssXXFRmt5F) 或电子邮件 [jesse@ bentonow.com 页面存档备份,存于互联网档案馆](mailto:jesse@bentonow.com) 提供个性化支持.

Bento Next.js SDK使得在你的Next.js应用程序中快速而容易地构建出极佳的分析体验. 我们提供强大而可定制的组件和钩子,可以被外出使用来跟踪你的用户行为和管理分析. 我们还揭露低水平的API,以便你们能够建立完全的定制体验.

开始吧 [综合指南](https://docs.bentonow.com/),或 [浏览 SDK 参考文献](https://docs.bentonow.com/subscribers)。 。 。 .

# 目录

-   [特征](https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/#readme-features)
-   [所需资源](https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/#readme-requirements)
-   [开始](https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/#readme-getting-started)
    -   [安装](https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/#readme-installation)
    -   [配置](https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/#readme-configuration)
-   [模块](https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/#readme-modules)
-   [要知道的东西](https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/#readme-things-to-know)
-   [捐款](https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/#readme-contributing)
-   [许可证](https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/#readme-license)

## 特征

-   **简单整合**: 快将 Bento 分析器添加到您的 Next.js 应用程序中,并带有预建组件 .
-   **页面视图跟踪**: 自动跟踪您 Next.js 应用程序的页面视图.
-   **用户识别**: 方便地识别用户进行更详尽的分析.
-   **自定义事件跟踪**:跟踪客户端和服务器端的自定义事件.
-   **Next.js 版本支持**:与"Next.js 13+"和"遗产"两个版本相兼容.
-   **服务器端集成**:可选服务器侧跟踪与本多节点SDK.

## 所需资源

-   下册.js 12.0+(具体支持13+)
-   节点.js 14+
-   有效本托账户 **SITE UUID 服务器**

## 开始

### 安装

安装 Bento Next.js SDK :

```bash
npm install @bentonow/bento-nextjs-sdk --save
```

可选地安装用于服务器侧面集成的 Bento 节点 SDK :

```bash
npm install @bentonow/bento-node-sdk --save
```

### 配置

在您的顶级布局中添加本多分析组件 :

下册.js 13+:

```jsx
import { BentoAnalytics } from '@bentonow/bento-nextjs-sdk/analytics'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <BentoAnalytics siteUuid={process.env.NEXT_PUBLIC_BENTO_SITE_ID!} userEmail={''} />
        {children}
      </body>
    </html>
  )
}
```

下册.js 12(遗产):

```jsx
import { BentoLegacyAnalytics } from '@bentonow/bento-nextjs-sdk/analytics/legacy'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <BentoLegacyAnalytics siteUuid={process.env.NEXT_PUBLIC_BENTO_SITE_ID!} userEmail={''} />
      <Component {...pageProps} />
    </>
  )
}
```

## 模块

### 页面视图跟踪

自动跟踪页面视图 :

```jsx
// Next.js 13+
import { useBentoAnalytics } from '@bentonow/bento-nextjs-sdk/analytics'

export default function Layout({ children }) {
  useBentoAnalytics(userEmail)
  return <>{children}</>
}

// Next.js 12 (legacy)
import { useBentoLegacyAnalytics } from '@bentonow/bento-nextjs-sdk/analytics/legacy'

function MyApp({ Component, pageProps }) {
  useBentoLegacyAnalytics(userEmail)
  return <Component {...pageProps} />
}
```

### 自定义事件跟踪

跟踪客户端自定义事件 :

```javascript
window.bento.track('optin', { organisation_name: 'Team Rocket' })
window.bento.tag('customer')
```

跟踪服务器侧自定义事件 :

```javascript
import { Analytics } from '@bentonow/bento-node-sdk'

const bento = new Analytics({ /* your configuration */ })

await bento.V1.track({
  email: 'user@example.com',
  type: 'optin',
  fields: {
    organisation_name: 'Team Rocket'
  }
})
```

## 要知道的东西

1.  SDK为Next.js 13+和遗留版本提供了不同的组件.
2.  页面视图跟踪在使用所提供的组件和钩子时是自动的.
3.  用户身份识别可以通过将用户的电子邮件传递到分析组件或钩子来完成.
4.  SDK支持客户端和服务器端的事件跟踪.
5.  对于更先进的用法,可以使用Next.js脚本组件自定义集成.

## 捐款

我们欢迎捐款! 请看我们的 [提供指南](https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/CODE_OF_CONDUCT.md) 关于如何提交拉动请求、报告问题和提出改进建议的详细信息.

## 许可证

Bento SDK for Next.js 以开源方式提供 [MIT 许可证](https://npmcn.com/package/%40bentonow/bento-nextjs-sdk/LICENSE.md)。 。 。 .

## 常见问题

### @bentonow/bento-nextjs-sdk 是什么？

Bento Next\.JS SDK和跟踪库

### 如何安装 @bentonow/bento-nextjs-sdk？

在项目目录运行 npm install @bentonow/bento-nextjs-sdk，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（^12\.0\.0 \|\| ^13\.0\.0 \|\| ^14\.0\.0 \|\| \>=15\.0\.0-rc）、react（^17\.0\.0 \|\| ^18\.0\.0 \|\| \>=19\.0\.0-beta）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bentonow/bento-nextjs-sdk 支持 TypeScript 吗？

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

### @bentonow/bento-nextjs-sdk 支持 ESM 还是 CommonJS？

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

### @bentonow/bento-nextjs-sdk 需要什么版本的 Node\.js？

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

### @bentonow/bento-nextjs-sdk 可以商用吗？

@bentonow/bento-nextjs-sdk 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bentonow/bento-nextjs-sdk 的下载量有多少？

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

### @bentonow/bento-nextjs-sdk 还在维护吗？

最新版本 0\.0\.1-rc3 发布于 2024/12/28（1\.9 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2024/06/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。