Skills
.Work. You
Rest

nextjs-opentelemetry-instrumentation

Official

Enable end-to-end tracing for Next.js apps.

Software Engineering#observability#vercel#tracing#instrumentation#nextjs#opentelemetry#server-components
AuthorAgentient
Version1.0.0
Installs0

System Documentation

What problem does it solve?

OpenTelemetry distributed tracing for Next.js 14+ App Router applications to provide end-to-end observability from browser through server components to API routes.

Core Features & Use Cases

  • Automatic spans for BaseServer.handleRequest, render route (app), and fetch [METHOD] [URL].
  • Manual instrumentation: create custom spans around business logic to capture important operations.
  • Client-side tracing: report browser interactions by instrumenting fetch/XHR.
  • Vercel integration: simplified setup with @vercel/otel for seamless observability in Vercel.
  • Configurability: enable instrumentation via next.config.js experimental.instrumentationHook and set OTLP exporter endpoints.

Quick Start

Install the OpenTelemetry packages, create instrumentation.ts that registers on startup, and enable instrumentationHook in next.config.js.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: nextjs-opentelemetry-instrumentation
Download link: https://github.com/Agentient/vibekit/archive/main.zip#nextjs-opentelemetry-instrumentation

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.