Were you able to setup this? I'm also facing trouble setting up this.

I got it to work. The instrument.ts file is experimental so you'll need this in your nextConfig

const nextConfig = { experimental: { instrumentationHook: true, }, }; module.exports = nextConfig;

If rolling your own, I had this issue where the http OTLPTraceExporter was not working for me, but the proto one was.

import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto";

1. First of all, you need to tell next that you will be using instrumentation hook in next.config.js

const nextConfig = {
  // your next config...
  experimental: {
    instrumentationHook: true,
  },
  // your next config...
}

2. Install dependencies:

pnpm add @vercel/otel @opentelemetry/api

3. Create instrumentation.ts file in same dir level as your pages/app directory:

import { registerOTel } from '@vercel/otel';

export function register() {
  registerOTel('zanreal-website');
}

4. Run locally jaeger and collector using docker-compose as described in this readme:
https://github.com/vercel/opentelemetry-collector-dev-setup

5. Run next dev with otel verbose:

NEXT_OTEL_VERBOSE=1 next dev

6. Open Jaeger UI:
http://0.0.0.0:16686/

7. Access your next.js app

---

That's it, you should be able now to access traces from your next.js application, if you want to wrap your custom code/server actions or db calls in separate spans, just follow usage example there:

https://github.com/vercel/otel

Hope that helped 😄

In case you would need a more detailed guidance I wrote a post about opentelemetry:

https://www.zanreal.net/blog/optimizing-nextjs-opentelemetry-guide

I found this repo, maybe it can help: https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry