Boilerplate

This boilerplate provides a full-stack Next.js setup with a structured monorepo, integrating OpenTelemetry for distributed tracing and metrics collection, and Axiom for centralized observability and monitoring. It includes TanStack Query for efficient data fetching, Next.js App Router for the frontend, and Next.js API Routes for backend logic. Featuring a complete CRUD example with pagination, search, and filtering, this boilerplate serves as an excellent starting point for production-grade Micro SaaS solutions with built-in observability.

Technical Stack

• Frontend: Next.js (App Router)
• Backend: Next.js API Routes
• Data Fetching: TanStack Query
• Database: Drizzle ORM (in a dedicated db package)
• UI Components: shadcn/ui (in a dedicated ui package)
• Observability:
  • OpenTelemetry for distributed tracing and metrics
  • Axiom for logs, metrics, and trace ingestion
• Containerization: Docker Compose

Key Features

• OpenTelemetry Integration:
  Captures traces, metrics, and spans across frontend and backend for deep insight into performance and latency.
• Axiom Observability:
  Sends logs and telemetry data to Axiom, enabling centralized visualization, query-based analytics, and alerting.
• Full CRUD Example:
  Demonstrates Create, Read, Update, and Delete operations with pagination, search, and filtering.
• Optimized Data Fetching:
  Uses TanStack Query for API caching, background updates, and optimistic UI.
• Next.js App Router + API Routes:
  Combines modern frontend architecture with built-in backend endpoints.
• Modular Architecture:
  • db Package: Drizzle ORM integration for type-safe queries.
  • ui Package: shadcn/ui for consistent design and reusable components.
• Scalable & SaaS-Ready:
  Designed for observability, debugging, and performance tuning out-of-the-box.

Use Cases

This boilerplate is ideal for developers who want to build production-ready Next.js applications with full observability from day one.

Perfect for:

• Micro SaaS products requiring robust tracing and performance insights
• Engineering teams focused on reliability, debugging, and system visibility
• DevOps and platform teams building observability into app templates

With Next.js for the frontend, API Routes for the backend, OpenTelemetry for distributed tracing, and Axiom for observability, this setup delivers a powerful, monitored, and scalable foundation for modern web applications. 🚀