APM Insight Next.js instrumentation

This is the official Next.js framework instrumentation for the APM Insight Node.js agent.

The Site24x7 Node.js agent uses the APM Insight Next.js package to monitor the application key metrics and Next.js-specific metrics in the back-end. If you want to monitor the front-end metrics such as web vitals, AJAX calls, and pageviews, you need to inject the RUM script into the header or footer of the index page or a common page of your application. These metrics can help improve your application's performance and identify bottlenecks in the application.

Note:

• The minimum supported Next.js version is 12.0.9.
• The APM Insight Next.js package does not provide any instrumentation for actions that occur during the build or in client-side code.

Before you can use Next.js module, you need to install the Site24x7 Node.js agent.

Table of contents:

• Installation
• Configuration
• Set configuration values
• Performance Metrics

Installation

This package is not bundled with the agent and must be installed separately. However, the package depends on the agent, so you will get all the agent's capabilities while loading this package.

• Run the following command in your Next.js project to install the APM Insight Node.js (APM) agent and APM Insight middleware for Next.js.

   npm install apminsight @apminsight/next

• When the command is completed successfully, the dependencies will be listed in your package.json file.

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

Configuration

Method 1: Next, modify your dev and start npm scripts by updating the scripts section of the package.json file. Allow your application to run with the Node’s -r option, which will preload @apminsight/next middleware.

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

The scripts section should look like the following:

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

Method 2: If you have no control over how your program is executed, you can load the @apminsight/next module before any other module. However, we recommend you avoid using this method at all costs. We discovered that bundling when running the next build causes issues and makes your bundle unnecessarily large.

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

Method 3: For Custom Next.js servers: If you're using Next as a custom server, you're probably not running your application using the Next CLI. In that case, we recommend executing the Next.js instrumentation as shown below.

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

Set configuration values

If you want to configure in the file, follow the steps below:

• Create a new file named apminsightnode.json and place it in the directory where you run the application.
• Add the below code snippet in the file.

	{"licenseKey" : "<license-key>",
	"appName" : "<application-name>",
	"port" : <application-port> }

If you are using proxy:

    {"licenseKey" : "<license-key>",
	"appName" : "<application-name>",
	"port" : <application-port>,
	"proxyServerHost" : "<proxy-server>",
	"proxyServerPort" : <proxy-port>,
	"proxyAuthUser" : "<proxy-user-name>",
	"proxyAuthPassword" : "<proxy-password>"}

Note: You can also configure the values as environment variables.

Performance metrics

To view the metrics in the client:

• Log in to your Site24x7 web client
• Navigate to APM > your Node.js application.
• Select the time frame for which you need the metrics. For which you can see your application’s server-side data flowing into the application monitor.