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 (@apminsight/next), 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.
Note:- The minimum supported Next.js version is 12.0.9.
- The APM Insight Next.js agent does not provide instrumentation for actions that occur during the build process or in client-side code.
Step 1: Install the APM Insight Next.js package
Run the following command in your Next.js project directory to install the APM Insight Next.js agent.
npm install @apminsight/next
When the command completes successfully, the dependency will be listed in your package.json file.
"dependencies": {
"@apminsight/next": "^1.2.4",
"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 ... */
Note: We recommend avoiding this method if possible. Bundling during next build may cause issues and increase bundle size unnecessarily.
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]"
}
Note: You can also configure the values as environment variables. Refer to the
Node.js agent configuration for the list of supported environment variable keys.
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.
