LogoTemplate0
Logo of Next.js Baselime Template with OpenTelemetry on template0.com

Next.js Baselime Template with OpenTelemetry

Next.js starter instrumented with OpenTelemetry tracing, Baselime Real User Monitoring, and an automatic Vercel log drain.

Introduction

A Next.js App Router project template from Baselime that ships pre-wired with OpenTelemetry distributed tracing and Baselime Real User Monitoring, so a freshly cloned app exports logs, traces, and browser telemetry to the Baselime console from its first deploy on Vercel.

What is the Next.js Baselime Template with OpenTelemetry?

It is a Next.js project template published by Baselime (repository baselime/baselime-nextjs-template) that comes already instrumented with OpenTelemetry and Real User Monitoring and sends logs and traces to Baselime. You supply your own Next.js application code starting from app/page.tsx; the template supplies the instrumentation layer, the Vercel deployment configuration, and the plumbing that forwards telemetry to the Baselime Console. It targets Vercel as the hosting platform.

What makes it stand out?
  • OpenTelemetry instrumentation for Next.js — the Baselime OpenTelemetry SDK for Next.js is already wired into the project and automatically captures distributed traces from the application, which are exported to Baselime for analysis rather than hand-instrumented.
  • Real User Monitoring — the template includes Baselime RUM, which collects performance data from real browsers visiting the app.
  • Automatic log drain — deploying installs the Baselime Vercel Integration, which configures a log drain that captures logs from your Vercel projects.
  • One-click Vercel deploy — the deploy button clones the repository into a new Vercel project named next-baselime-opentelemetry, so no manual environment setup is required.
  • Next.js App Router structure — pages live under the app directory; editing app/page.tsx updates the page live during development.
  • Four package managers supported — the dev server starts with npm run dev, yarn dev, pnpm dev, or bun dev, serving on http://localhost:3000.
  • Public sandbox demo — the deploy flow links to a live Baselime sandbox project (sandbox.baselime.io/baselime/vercel-baselime/default/home) where the deployed traces and logs can be inspected before you commit.
Who is it for?
  • Next.js developers deploying to Vercel: start a new app with tracing and RUM already configured instead of wiring an OpenTelemetry exporter by hand.
  • Platform and DevOps engineers: use it as a working reference for how a Vercel log drain plus a Baselime integration captures project logs.
  • Teams evaluating Baselime: deploy the template and inspect real traces, logs, and RUM data in the Baselime Console before adopting it across projects.
What can you do with the Next.js Baselime Template with OpenTelemetry?
  • Debug a slow request path: open the deployed app, generate traffic, and follow the resulting distributed traces in Baselime to see where time is spent across the Next.js request lifecycle.
  • Collect Vercel logs without extra agents: deploy through the Vercel button so the Baselime integration installs the log drain that captures logs from your Vercel projects.
  • Measure real front-end performance: RUM data from actual visitors shows how the app performs in users' browsers, not just on the server.
  • Prototype an observability setup on a new project: clone the repo, add pages, and keep the existing OpenTelemetry and RUM configuration intact.
How does the template work?

Clone the repository or use the Vercel deploy button, then run the dev server with your package manager of choice and open http://localhost:3000. The bundled Baselime OpenTelemetry SDK instruments the Next.js app automatically and exports traces, while RUM captures browser-side data; on Vercel, the Baselime integration adds a log drain for project logs. Logs and traces are then read in the Baselime Console, and the docs at baselime.io/docs cover the wider platform.

FAQ
Is this template free to use?

It is a public GitHub repository that you clone or deploy with one click, so there is no cost to obtain it. The telemetry it produces is sent to Baselime, a hosted observability service you sign into through the Baselime Console, and the page itself does not list plan tiers.

What telemetry does it collect?

Three things: distributed traces captured by the Baselime OpenTelemetry SDK for Next.js, logs collected through the Vercel log drain, and Real User Monitoring data gathered from real browsers visiting the application. All of it is exported to Baselime for analysis.

Do I need a Vercel account?

The template is built to deploy to Vercel, and the automatic log drain depends on the Baselime Vercel Integration, which only applies to Vercel projects. You can still run the app locally with the dev server, but the log-drain portion of the setup is specific to that platform.

How do I start the development server?

Run npm run dev, yarn dev, pnpm dev, or bun dev from the project root, then open http://localhost:3000. Edit app/page.tsx and the page auto-updates as you save.

Where do I see the collected logs and traces?

In the Baselime Console at console.baselime.io, which is where the template's README points for viewing the deployed application's logs and traces. A live sandbox project demonstrating the deployed data is also linked from the deployment flow.

screenshot of Next.js Baselime Template with OpenTelemetry on template0.com

Information

GitHub Info

  • Stars90
  • Last maintained2024/03/11
  • LicenseMIT
  • Primary languageTypeScript

Categories

Tags

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates