Next.js APM - Setup & Installation Docs | Middleware
Traces | Metrics | App Logs | Custom Logs | Profiling |
---|---|---|---|---|
✅ | ✖️ | ✖️ | ✅ | ✅ |
This guide walks you through setting up Application Performance Monitoring (APM) on a Next.js application. These instructions can also be found on the Installation page in your Middleware Account. View example code here.
Infra Agent
Infrastructure Agent (Infra Agent). To install the Infra Agent, see our Installation Guide.
Next.js Version
Next.js version 13.4
or above. Check your Next.js version with the following command:
OpenTelemetry Version
@opentelemetry/api
package version >= v1.3.0
and < v1.5.0
:
Next.js
APM PackageRun the following command in your terminal:
Add the following code to your next.config.js
file:
Applications running in a container require an additional environment variable. If your application is not running in a container, move to Step 4.
Add the following environment variable to your application:
DOCKER_BRIDGE_GATEWAY_ADDRESS
is the IP address of the gateway between the Docker host and bridge network. This is 172.17.0.1
by default.
Learn more about Docker bridge networking here Add the following environment variable to your application deployment YAML file:
For Kubernetes clusters, add the following environment variable to your application:
instrumentation.ts (or .js)
file in your project root
directory or inside the src
folderinstrumentation.ts
file must be located at the root
of your project unless you are using the src
directory. If you are using the src
directory, ensure the instrumentation.ts
file is placed within the src
directory, alongside the pages and app directories.pagesExtension
config option to add suffixespagesExtension: ['ts']
, the instrumentation file should be named instrumentation.ts
. Ingest custom logs by using the following functions based on desired log severity levels:
npx create-next-app@latest --example api-routes
Continuous profiling captures real-time performance insights from your application to enable rapid identification of resource allocation, bottlenecks, and more. Navigate to the Continuous Profiling section to learn more about using Continuous Profiling with the Next.js APM.