Boilerplate

A full-stack boilerplate combining Next.js App Router with OpenTelemetry instrumentation sending telemetry data to Axiom, and Hono as a modular API package. This setup demonstrates how to enable end-to-end observability across both the Next.js application and the API layer — automatically capturing route methods, request timings, and performance metrics from the Hono app.

Features

• Next.js App Router for modern full-stack development.
• Hono as the backend API framework, encapsulated in a standalone package.
• OpenTelemetry instrumentation integrated directly in the Next.js runtime.
• Automatic trace and span collection for Hono routes (HTTP methods, endpoints, latency).
• Axiom exporter for logs, metrics, and distributed tracing.
• Modular structure for scalable and observable monorepo applications.
• TypeScript support for type-safe development.

Technical Stack

• Frontend: Next.js (App Router)
• Backend: Hono (as packages/api)
• Observability:
  • OpenTelemetry for distributed tracing, metrics, and spans
  • Axiom for telemetry ingestion, analytics, and visualization
• Integration: Next.js → Proxy API routes → Hono (via packages/api)
• Language: TypeScript

Observability Behavior

Once OpenTelemetry is enabled in Next.js:

• All frontend and backend requests are traced.
• Hono routes appear as spans with method (e.g. GET /api/v1/users) and latency.
• Traces are automatically exported to Axiom, where you can query and visualize:
• Route durations and response codes
• Distributed traces across frontend → backend
• Performance bottlenecks and error rates

Use Case

This boilerplate is ideal for developers building observable Next.js + Hono applications who want full-stack visibility without manual setup. It’s perfect for:

• Monitoring API performance and user-facing request latency
• Debugging distributed interactions between frontend and backend
• Building production-grade apps with observability-first architecture

With Next.js, Hono, OpenTelemetry, and Axiom, this boilerplate delivers a complete observability layer out-of-the-box — empowering teams to trace, monitor, and optimize every part of the stack. 🚀