NextJS APM Setup
Traces | Metrics | App Logs | Custom Logs | Profiling |
---|---|---|---|---|
- | - |
Guide
You can refer this demo project to refer use cases of APM.
Step 1: Install Next.js APM package
Run the command below in your terminal to install Middleware’s Next.js APM package:
Make sure you have installed the latest version of Next.js or a version greater than 13.4+, as Vercel introduced their experimental feature in that release.
Before proceeding with the Next.js APM setup, make sure you have the @opentelemetry/api package installed. If it’s not already installed, run the following command:
npm install @opentelemetry/api@">=1.3.0 <1.5.0"
Step 2: Modify the next.config.js
file
As this feature is experimental, you need to explicitly opt-in by adding the following code to your next.config.js file:
Shell
Step 3: Create an Instrumentation
file
Create a custom instrumentation.ts
(or .js
) file in your project root directory (or inside src
folder, if using one), and add the following code as per your choice:
- If you are using Vercel platform to deploy your projects, then use the code snippet below for serverless functions:
Shell
You can find your <ACCESS-TOKEN,> on the Installation screen for NextJs / Vercel.
After Deploying your project on Vercel, you need to integrate the Middleware from the marketplace. You can find more details here. To get a better idea, you can clone the sample project from the GitHub repository.
- If you are using Middleware’s Host-agent on your machine then use code snippet below:
- If you want to instrument your project without installing any host, then use the code snippet below:
Shell
Step 4: Enable Logging
To enable logging in your project, you need to add the following code in your file:
Shell
Note for APM inside Kubernetes
If you are using APM in a Kubernetes cluster make sure to follow these 2 steps:
Step 1 : Find your Middleware Service namespace
For older setup, your “mw-service” can be inside mw-agent-ns-{FIRST-5-LETTERS-OF-API-KEY}
namespace
For newer setup, we simplified the namespace name to mw-agent-ns
Step 2 : Set this ENV variable in your application deployment YAML
Please replace “NAMESPACE” with the correct value that you found from Step 1.