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.
SDKを追加し、OTLPをMapleに向ければトレースが届きます — 多くのセットアップは5分以内です。
maple.dev — OpenTelemetryの上のオブザーバビリティ