​

Overview

This guide walks you through setting up the Vercel APM integration.

These instructions can also be found on the Installation page in your Middleware Account. View demo code here.

​

Prerequisites

1. Vercel Pro or Enterprise Account

2. Next.js version 13.4 or newer installed. Check your Next.js version with the following command:

npx next --version

3. @opentelemetry/api package installed. If not, run the following command:

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

​

Install

​

Step 1: Add Middleware Integration

1. Add the Middleware integration from the Vercel marketplace:

2. Select a Vercel Account to add the Integration to:

3. Select the Project you want to track:

4. Allow Permissions and Add Integration:

5. Login to your Middleware Account:

6. The below screen indicates you have successfully integrated Vercel and Middleware:

7. In Vercel, enable traces prior to deploying your project

​

Step 2: Install Next.js APM Package

Run the following command in your terminal:

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

​

Step 3: Modify Config File

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

const nextConfig = {
    // ...
    // Your existing config

     experimental: {
         instrumentationHook: true
     }

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

​

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. The access token is your account key, which can be found on the Installation page:

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

export function register() {
    tracker.track({
        projectName: "<PROJECT-NAME>",
        serviceName: "<SERVICE-NAME>",
        accessToken: "<xxxxxxxxxx>",
        target: "vercel"
    });
}

4. Integrate your APIs or Serverless functions prior to deployment. Vercel will treat your app as a static website during deployment if you have not integrated any APIs or Serverless functions and the instrumentation.ts file will not be invoked, resulting in the absence of traces or logs in your Middleware account.

​

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 on Vercel

​

Troubleshooting

If you do not see any data appear on the Middleware dashboard, redeploy your project on Vercel. This should ensure that the traces and profiling data are properly generated and collected by Middleware.