​
What you will learn

  • How to set up your environment
  • How to your application using the infrastack.ai SDK or the official OpenTelemetry SDK

​
Prerequisites

  • An infrastack.ai account to get your API key
  • A Next.js application

Follow the example project on GitHub

​
Getting started

You can use the Infrastack SDK to instrument your Next.js application with a single line of code.

1

Install the NPM package

npm install @infrastack/otel
2

Prepare your environment

Create an .env file in the root of your project and add your API key.

.env
INFRASTACK_API_KEY=sk-1*************************f5af
3

Configure your Next.js application

This is step is required in order to enable instrumentation. Right now, instrumentationHook and serverComponentsExternalPackages are expermiental. Please follow the Official Next.js Documentation for instrumentationHook if this document is outdated.

next.config.mjs
const nextConfig = {
    experimental: {
        instrumentationHook: true, // To enable instrumentation
    },
};

export default nextConfig;
4

Create instrumentation.ts

If you are using a src folder in your Next.js application, create an instrumentation.ts file there. If not, create the file in the root of your project.
instrumentation.ts
import { Infrastack, Protocol } from "@infrastack/otel";
export async function register() {
    Infrastack.init({
        serviceName: "YOUR_SERVICE_NAME",
        protocol: Protocol.HTTP, // Recommended for Vercel
    });
}
If you don’t provide a service name, we will create a random name for you.
5

Run your application

Run your Next.js application with the default command.

npm run dev
You can check your data from the infrastack.ai dashboard.

​
Next steps

Deploy Next.js with OpenTelemetry to Vercel

Deploy Next.js with OpenTelemetry to Render

Dockerize Next.js with OpenTelemetry

Javascript SDK Reference

Explore the Next.js example project

Getting StartedIntegrate OpenTelemetry for Nest.js with infrastack.ai