# OpenTelemetry for Next.js

Instrument your Next.js applications with OpenTelemetry using the the Baselime Node.js OpenTelemetry SDK.

# Instrumentation

# Step 1: Install the SDK

Install @baselime/node-opentelemetry in your project.

npm i @baselime/node-opentelemetry 

# Step 2: Initialise the tracer

Create a file instrumentation.ts in the root of your project and add the following code to configure and initialize OpenTelemetry.

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { BaselimeSDK, VercelPlugin, BetterHttpInstrumentation } = await import('@baselime/node-opentelemetry');

    const sdk = new BaselimeSDK({
      serverless: true,
      service: "your-project-name",
      instrumentations: [
        new BetterHttpInstrumentation({ 
          plugins: [
            // Add the Vercel plugin to enable correlation between your logs and traces for projects deployed on Vercel
            new VercelPlugin()


# Step 3: Set the Baselime environment variables

Set the BASELIME_KEY environment variable to your Baselime public API Key. Get your pulic API key from the Baselime console.

# Step 4. Enable Next.js Auto Instrumentation

Next.js 13.4+ supports auto-instrumentation. Add experimental.instrumentationHook = true to your next.config.js to enable auto-instrumentation of all the requests your app makes to external services.

await import("./src/env.mjs");

/** @type {import("next").NextConfig} */
const config = {
    experimental: {
        instrumentationHook: true,

export default config;

Once these steps are completed, distributed traces from your Next.js application should be available in Baselime to query via the console or the Baselime CLI.

Example Next.js Trace
Example Next.js Trace

# Tracing your tRPC applications

tRPC is a framework that enables you to easily build & consume fully typesafe APIs without schemas or code generation. The Baselime Node OpenTelemetry SDK enables automatically tracing your tRPC applications with its tRPC middleware.

# Adding custom OpenTelemetry spans

To add custom spans to your OpenTelemetry traces, install the @opentelemetry/api package.

npm i @opentelemetry/api

And manually add spans to your traces.

import { trace } from "@opentelemetry/api";
import { useSearchParams } from 'next/navigation'
const tracer = trace.getTracer('your-custom-traces');

export default async function Home({}) {
    const searchParams = useSearchParams()
  const search = searchParams.get('search')
  const span = trace.getActiveSpan();
  span.setAttribute('search', search)

  const result = await tracer.startActiveSpan(`business-logic`, async (span) => {
    // your business logic
    const input = { search }
    const result = await yourBusinessLogic(input)
    return result

  return (
    <main className="flex min-h-screen ...">
      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">