如何监控 Next.js 应用程序

Next.js 是一个优化网页和应用程序性能的 JavaScript 框架，支持开发服务端渲染应用程序和中间件。

借助 APM Insight Next.js 包，Node.js 代理可以监控后端可观测性。在后端，您可以监控常规应用程序关键指标以及 Next.js 专属指标。如果您还想监控 Web Vitals、AJAX 调用和页面浏览等前端指标，需要将 RUM 脚本注入到您希望监控的应用程序或网站的索引页或公共页面的页头或页脚中。

请按照以下步骤将 APM Insight Next.js 包添加到您的应用程序：

• • 安装 APM Insight Next.js 包
  • 配置
  • 设置配置值
• 在 Web 客户端中查看后端性能数据
• 在 Web 客户端中查看前端性能数据

安装 APM Insight Next.js 包

按照以下说明安装 APM Insight Next.js 包。

1. 在您的 Next.js 项目中运行以下命令，以安装 APM Insight Node.js (APM) 代理和 APM Insight Next.js 中间件。

   npm install @apminsight/next

2. 命令成功执行后，依赖项将列在您的 package.json 文件中。

   "dependencies": {
   "@apminsight/next": "^1.2.0",
   "next": "latest",
   },

配置

方法一：

接下来，通过更新 package.json 文件的 scripts 部分来修改您的 dev 和 start npm 脚本。使用 Node 的 -r 选项运行您的应用程序，以预加载 @apminsight/next 中间件。

NODE_OPTIONS='-r @apminsight/next' next start

scripts 部分应如下所示：

"scripts": {
"dev": "NODE_OPTIONS='-r @apminsight/next' next",
"build": "next build",
"start": "NODE_OPTIONS='-r @apminsight/next' next start"
},

require('@apminsight/next')
/* ... the rest of your program ... */

方法三：

适用于自定义 Next.js 服务器

如果您使用的是自定义服务器，您可能不是通过 Next CLI 运行应用程序的。在这种情况下，我们建议按如下方式执行 Next.js 检测。

node -r @apminsight/next your-start-file.js

设置配置值

如果您想通过文件进行配置，请按照以下步骤操作：

1. 创建一个名为 apminsightnode.json 的新文件，并将其放置在运行应用程序的目录中。
2. 在文件中添加以下代码片段。

{"licenseKey" : "",
"appName" : "",
"port" :  }

如果您使用代理，请添加以下代码：

{"licenseKey" : "",
"appName" : "",
"port" : ,
"proxyServerHost" : "",
"proxyServerPort" : ,
"proxyAuthUser" : "",
"proxyAuthPassword" : ""}

在 Web 客户端中查看后端性能数据

查看指标的步骤：

1. 登录 Site24x7 Web 客户端。
2. 前往 APM > 您的应用程序。

您可以看到应用程序的服务端数据流入应用程序监视器。

在 Web 客户端中查看前端性能数据

要监控 Next.js 应用程序的前端，您需要将 Site24x7 RUM 脚本注入到应用程序索引页或公共页面的页头或页脚中。更多信息，请访问此帮助页面。

发布说明

了解每个版本的主要修复和次要修复内容，并保持 Next.js 代理更新到最新版本以获得最佳性能。

版本 1.2.1

2026 年 1 月 2 日

增强：

• 增强了 Docker 镜像的安全措施。
  

版本 1.2.0

2025 年 7 月 23 日

增强：

• 将底层 apminsight 依赖项更新至最新版本。
• 引入 .npmignore 文件以在发布到 npm 时优化包体积。
• 更新了 README.md 文件以反映最新更改。

问题修复：

• 修复了由 configInstance.getBaseDir is not a function 错误引起的日志文件创建问题。

版本 1.1.0

2023 年 8 月 4 日

增强：

• 引入独立的作用域包 @apminsight/next 以支持 Next.js 应用程序。
• 支持跟踪中间件执行和预渲染 HTML。