Install APM Insight Next.js Agent

Next.js is a JavaScript framework for building server-side rendered and statically generated web applications. With the APM Insight Next.js agent, you can monitor the back-end performance of your Next.js applications in Applications Manager, including key metrics, middleware execution, and pre-rendered HTML tracking.

Step 1: Install the APM Insight Next.js package

1. Download the APM Insight Next.js Agent (apm_insight_nextjs_agent.zip) file and extract it in the application server.
2. Use the following command to install an APM Insight Next.js agent from application-installed directory:

   Syntax:
   npm install <Next.js-Agent-extracted-path>/source
   
   Example:
   npm install /users/joe/source

   If you want to deploy APM Insight agent to all the Next.js applications on the computer, use the global option via -g flag.

   Syntax:
   npm install -g <Next.js-Agent-extracted-path>/source
   
   Example:
   npm install -g /users/joe/source

   This will create an APM Insight directory under node_modules.

3. When the command completes successfully, the dependency will be listed in your package.json file.

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

Step 2: Configure the agent

You can configure the APM Insight Next.js agent using one of the following methods.

Method 1: Update npm scripts (recommended)

Modify the scripts section of your package.json file to include the NODE_OPTIONS environment variable, which preloads the @apminsight/next middleware.

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

Method 2: Load the module in your application

Add the require statement for @apminsight/next before any other module in your application start file.

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

Method 3: Custom Next.js server

If you are using a custom Next.js server and not running your application via the Next CLI, start your application with the -r flag to preload the agent.

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

Step 3: Set configuration values

Create a new file named apminsightnode.json in the directory where you run the application and add the following configuration.

{
  "licenseKey": "[LICENSE-KEY]",
  "appName": "[APPLICATION-NAME]",
  "port": "[APPLICATION-PORT]",
  "apmHost": "[APM-HOST-NAME]",
  "apmPort": "[APM-SSL-PORT]"
}

If you are using a proxy, add the proxy settings to the configuration file.

{
  "licenseKey": "[LICENSE-KEY]",
  "appName": "[APPLICATION-NAME]",
  "port": "[APPLICATION-PORT]",
  "apmHost": "[APM-HOST-NAME]",
  "apmPort": "[APM-SSL-PORT]",
  "proxyServerHost": "[PROXY-SERVER]",
  "proxyServerPort": "[PROXY-PORT]",
  "proxyAuthUser": "[PROXY-USERNAME]",
  "proxyAuthPassword": "[PROXY-PASSWORD]"
}

Step 4: Restart and view performance data

Restart your application and carry out a few transactions. Navigate to the APM tab in Applications Manager to view the back-end performance metrics for your Next.js application.

Install in Kubernetes

You can also integrate the APM Insight Next.js agent into your Kubernetes application using initContainers. For step-by-step instructions, refer to the APM Insight integration for Next.js in Kubernetes guide.