Add distributed tracing to your Next.js application in minutes. Capture server components, API routes, and middleware spans automatically with Vercel's built-in instrumentation hook.
npm install @vercel/otel @opentelemetry/sdk-logs @opentelemetry/exporter-logs-otlp-http// instrumentation.ts (project root)
import { registerOTel } from "@vercel/otel";
import { OTLPLogExporter } from "@opentelemetry/exporter-logs-otlp-http";
import { SimpleLogRecordProcessor } from "@opentelemetry/sdk-logs";
export function register() {
registerOTel({
serviceName: "my-next-app",
attributes: { environment: "production" },
traceExporter: { url: "https://ingest.maple.dev/v1/traces" },
logRecordProcessor: new SimpleLogRecordProcessor(
new OTLPLogExporter({
url: "https://ingest.maple.dev/v1/logs",
headers: { Authorization: "Bearer your-api-key" },
})
),
});
}Automatic spans for every page and route handler request with method, status, and duration.
Full tracing of API route handlers including request/response metadata.
Spans for React Server Component rendering and data fetching.
Traces for Next.js middleware execution including redirects and rewrites.
Automatic instrumentation of Prisma, Drizzle, and other database clients.
Outgoing HTTP requests traced with fetch instrumentation and context propagation.