Boilerplate

A full-stack boilerplate combining Next.js App Router for the frontend and Hono (as an API package) for the backend, fully instrumented with OpenTelemetry to send traces and metrics to Axiom. This setup provides a complete example of observability in a modular Next.js + Hono architecture, allowing you to track performance, latency, and API flow end-to-end in real time.

Features

• Next.js App Router for modern frontend development.
• Hono as the backend API framework for fast, lightweight, and edge-friendly routing.
• API mounted in Next.js via app/api/[[...route]]/route.ts using the proxy mode.
• OpenTelemetry instrumentation to collect traces, spans, and metrics.
• Axiom exporter for centralized observability and real-time monitoring.
• TypeScript support for type-safe development.
• Modular packages/api structure for clean organization and scalability.

Technical Stack

• Frontend: Next.js (App Router)
• Backend: Hono (as packages/api)
• Observability:
  • OpenTelemetry for distributed tracing and performance metrics.
  • Axiom for ingestion, visualization, and monitoring.
• Language: TypeScript
• Integration: Next.js API proxy → /api → Hono app

Use Case

Perfect for developers building Next.js + Hono applications who want production-grade observability with minimal setup. This boilerplate allows you to:

• Monitor API performance, response times, and latency.
• Trace requests from Next.js frontend through Hono backend.
• Send all telemetry to Axiom for dashboarding and alerting.
• Maintain a modular and edge-friendly architecture ready for scaling.

With Next.js for the frontend, Hono as a standalone API package, OpenTelemetry for tracing, and Axiom for observability, this boilerplate offers a powerful, instrumented foundation for modern, reliable web applications. 🚀