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.

​

Prerequisites

npx next --version

npm install @opentelemetry/api”>=1.3.0 <1.5.0”

​

Install

​

Step 1: Install Next.js APM Package

Run the following command in your terminal:

npm install @middleware.io/agent-apm-nextjs

​

Step 2: Modify Config File

Add the following code to your next.config.js file:

const nextConfig = {
    experimental: {
        instrumentationHook: true,
        serverComponentsExternalPackages: ['@middleware.io/agent-apm-nextjs']
    }
}
module.exports = nextConfig

​

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:

MW_AGENT_SERVICE=<DOCKER_BRIDGE_GATEWAY_ADDRESS>

​

Kubernetes

Add the following environment variable to your application deployment YAML file:

MW_AGENT_SERVICE=mw-service.mw-agent-ns.svc.cluster.local

For Kubernetes clusters, add the following environment variable to your application:

kubectl get service --all-namespaces | grep mw-service

​

Step 4: Create Instrumentation File

1. Create a custom instrumentation.ts (or .js) file in your project root directory or inside the src folder

2. Synchronize your instrumentation filename if you are using the pagesExtension config option to add suffixes

3. Add the below code snippet depending on your current setup:

• Infra Agent Installed
• Infra Agent NOT Installed

    // @ts-ignore
    import tracker from '@middleware.io/agent-apm-nextjs';
    export function register() {
        tracker.track({
            serviceName: "<SERVICE-NAME>",
            accessToken: "<xxxxxxxxxx>"
        });
    }

​

Step 5: Enable Logging

Ingest custom logs by using the following functions based on desired log severity levels:

// @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
}

​

Step 6: Deploy your Project

​

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.