TracesMetricsApp LogsCustom LogsProfiling
--

​
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"
npm install @middleware.io/agent-apm-nextjs

​
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
const nextConfig = {
    // ...
    // Your existing config

     experimental: {
         instrumentationHook: true
     }

    // ...
    // Your existing config
}
module.exports = nextConfig

​
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
// @ts-ignore
import tracker from '@middleware.io/agent-apm-nextjs';

export function register() {
    tracker.track({
        projectName: "<PROJECT-NAME>",
        serviceName: "<SERVICE-NAME>",
        accessToken: "<ACCESS-TOKEN>",
        target: "vercel"
    });
}
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.
// @ts-ignore
import tracker from '@middleware.io/agent-apm-nextjs';

export function register() {
    tracker.track({
        projectName: "<PROJECT-NAME>",
        serviceName: "<SERVICE-NAME>",
        accessToken: "<ACCESS-TOKEN>"
    });
}
  • If you want to instrument your project without installing any host, then use the code snippet below:
Shell
// @ts-ignore
import tracker from '@middleware.io/agent-apm-nextjs';

export function register() {
    tracker.track({
        projectName: "<PROJECT-NAME>",
        serviceName: "<SERVICE-NAME>",
        accessToken: "<ACCESS-TOKEN>",
        target: "https://{ACCOUNT-UID}.middleware.io"
    });
}

​
Step 4: Enable Logging

To enable logging in your project, you need to add the following code in your file:

Shell
// @ts-ignore
import tracker from '@middleware.io/agent-apm-nextjs';

export default async function handler(req, res) {
    // ...
    // Your existing code

    tracker.info("Info Sample");
    tracker.warn("Warn Sample", {
        "tester": "Alex",
    });
    tracker.debug("Debug Sample");
    tracker.error("Error Sample");

    // ...
    // Your existing code
}

​
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

MW_AGENT_SERVICE=mw-service.NAMESPACE.svc.cluster.local
Please replace “NAMESPACE” with the correct value that you found from Step 1.