Next.js has an instrumentation hook built in. Register OpenTelemetry there, and server components, API routes and middleware produce spans with no further code.
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";
const MAPLE_ENDPOINT = "https://ingest.maple.dev";
const headers = { authorization: "Bearer your-api-key" };
export function register() {
registerOTel({
serviceName: "my-next-app",
attributes: { "deployment.environment.name": "production" },
traceExporter: { url: `${MAPLE_ENDPOINT}/v1/traces`, headers },
logRecordProcessor: new SimpleLogRecordProcessor(
new OTLPLogExporter({ url: `${MAPLE_ENDPOINT}/v1/logs`, headers })
),
});
} Automatic spans for every page and route handler request with method, status, and duration.
Spans for API route handlers, with request and response metadata.
Spans for React Server Component rendering and data fetching.
Traces for Next.js middleware execution including redirects and rewrites.
Log records exported over OTLP carry the trace and span id of the request that wrote them.
Outgoing fetch requests traced with context propagation. Add database client instrumentations through the instrumentations option.
Add the SDK, point your OTLP exporter at Maple, and traces arrive.
maple.dev: observability on OpenTelemetry