Traces | Metrics | App Logs | Custom Logs | Profiling |
---|---|---|---|---|
✅ | ✖️ | ✖️ | ✅ | ✅ |
Prerequisites
1
Infra Agent
Infrastructure Agent (Infra Agent). To install the Infra Agent, see our Installation Guide.
Although the Infra Agent is not required for the Next.js APM, we recommend installing it for improved performance.
2
Next.js Version
Next.js version 13.4
or above. Check your Next.js version with the following command:Shell
3
OpenTelemetry Version
@opentelemetry/api
package version >= v1.3.0
and < v1.5.0
:Shell
Install
Step 1: Install Next.js
APM Package
Run the following command in your terminal:
Shell
Step 2: Modify Config File
Add the following code to yournext.config.js
file:
Next.js
Step 3: Container Variables
Applications running in a container require an additional environment variable. If your application is not running in a container, move to Step 4.Docker
Add the following environment variable to your application:Shell
The
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 Kubernetes
Add the following environment variable to your application deployment YAML file:Shell
Shell
Step 4: Create Instrumentation File
- Create a custom
instrumentation.ts (or .js)
file in your projectroot
directory or inside thesrc
folder
The
instrumentation.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.- Synchronize your instrumentation filename if you are using the
pagesExtension
config option to add suffixes
Example: If you use
pagesExtension: ['ts']
, the instrumentation file should be named instrumentation.ts
. - Add the below code snippet depending on your current setup:
Next.js
Step 5: Enable Logging
Ingest custom logs by using the following functions based on desired log severity levels:Next.js
Step 6: Deploy your Project
If you’re looking to set up a sample Next.js project with API routes, you can use the following command in your terminal:
npx create-next-app@latest --example api-routes
Continuous Profiling
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. Need assistance or want to learn more about Middleware? Contact us at support[at]middleware.io.