maple-nextjs-style

Configure OpenTelemetry instrumentation for Next.js apps with Maple observability.

1.6k|107|Updated Feb 15, 2026
One-click install
npx skills add https://github.com/MapleTechLabs/maple --skill maple-nextjs-style-mapletechlabs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: maple-nextjs-style
Source: https://github.com/MapleTechLabs/maple/tree/main/skills/maple-nextjs-style
Command: npx skills add https://github.com/MapleTechLabs/maple --skill maple-nextjs-style-mapletechlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the guesswork and common misconfigurations when setting up OpenTelemetry observability for Next.js applications integrated with Maple, avoiding issues like incorrect SDK usage, Vercel environment propagation quirks, and redundant logging that duplicates OTel events.

Core Features & Use Cases

  • Preconfigured Maple OTel Bootstrap: Ready-to-use instrumentation.ts setup using @vercel/otel with inline Maple endpoint and ingest key to bypass Vercel preview build environment quirks.
  • LLM Provider Instrumentation: Correct integration of OpenInference for Anthropic and other LLM SDKs, with guidance to avoid duplicate span attributes and manual cost calculation.
  • Route-Level Observability Patterns: Best practices for adding business context spans and structured logs using @maple/otel-helpers without cluttering route handler code. Use case: A developer building a Next.js AI chatbot can use this Skill to automatically capture traces, logs, and metrics for both app routes and LLM calls in Maple, with zero common configuration errors.

Quick Start

Use the maple-nextjs-style skill to configure correct OpenTelemetry instrumentation for your Next.js app integrated with Maple, including LLM provider tracing and route-level span setup.

Frequently Asked Questions about maple-nextjs-style

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure OpenTelemetry instrumentation for a Next.js app on Vercel?

To configure OpenTelemetry instrumentation for a Next.js app, use a preconfigured instrumentation.ts setup with @vercel/otel and inline Maple endpoint and ingest keys to bypass Vercel preview build environment quirks.

Why does my Next.js OpenTelemetry setup create duplicate OTel events and logs?

Duplicate OTel events in Next.js OpenTelemetry setups occur due to misconfiguration. Using correct SDK bootstrap and proper structured logging patterns prevents redundant logging and duplicate span attributes.

What is the best way to add LLM tracing to a Next.js application?

The best way to add LLM tracing to a Next.js application is integrating OpenInference for LLM SDKs. This captures LLM provider calls automatically without duplicate span attributes or manual cost calculation.

Can I capture route-level observability and business context spans in Next.js without cluttering code?

You can capture route-level observability and business context spans in Next.js without cluttering code by using helper modules to add structured logs and spans alongside your application routes.

Does the Maple observability platform work with Next.js and Vercel preview environments?

The Maple observability platform works with Next.js and Vercel preview environments by bypassing environment propagation quirks through inline endpoint and ingest key configuration during the OTel bootstrap.

How do I avoid manual cost calculation when instrumenting LLM calls with OpenTelemetry?

To avoid manual cost calculation when instrumenting LLM calls with OpenTelemetry, integrate OpenInference for your LLM SDKs. This automatically captures provider call attributes without requiring manual calculations.