How to monitor a Next.js application

Next.js is a JavaScript framework that optimizes the performance of webpages and applications. It allows you to develop server-side rendered applications and middleware.

With the help of the APM Insight Next.js package, the Node.js agent can monitor back-end observability. On the back end, you can monitor the usual application key metrics and Next.js-specific metrics. 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 or website that you would like to monitor.

Follow the below steps to add the APM Insight Next.js package to your application:

• • Installing APM Insight Next.js package
  • Configuration
  • Set configuration values
• View back-end performance data in the web client
• View front-end performance data in the web client

Installing the APM Insight Next.js package

To install the APM Insight Next.js package, follow the instructions given below.

1. 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

2. 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"
},

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:

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

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

If you are using a proxy, add the below code:

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

View back-end performance data in the web client

To view the metrics:

1. Log in to the Site24x7 web client.
2. Navigate to APM > your application.

You can see your application’s server-side data flowing into the application monitor.

View front-end performance data in the web client

To monitor the front end of a Next.js application, you need to inject the Site24x7 RUM script into the header or footer of the index page or a common page of your application. For more information, visit this help page.