​
What you will learn

  • Installing the @infrastack/otel NPM package
  • Setting up your environment
  • Instrumenting your application

​
Prerequisites

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

Follow the example project on GitHub

​
Getting started

1

Install the NPM package

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
      serverComponentsExternalPackages: [ // To utilize node.js specific features in a next.js environment
     "@opentelemetry/auto-instrumentations-node",
     "@opentelemetry/sdk-node",
   ],
  },
};

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
export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    const { startOtel } = await import("@infrastack/otel");
startOtel({
      "serviceName": "YOUR_SERVICE_NAME",
    });
  }
}
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

Javascript SDK Reference

Explore the Next.js example project

Getting StartedIntegrate OpenTelemetry for Nest.js with infrastack.ai