Back to templates

Template details

Next.js Highlight Demo

Next.js application pre-configured with Highlight for local development and error monitoring setup.

About this template

Next.js Highlight Demo is a minimal Next.js starter application pre-configured with the Highlight monitoring and session-replay tooling, serving as a working sandbox for the Highlight Next.js integration walkthrough.

What is Next.js Highlight Demo?

Next.js Highlight Demo is a boilerplate built on the Next.js framework that comes pre-wired with Highlight, a developer observability platform for error monitoring, logging, and session replay. The repository is a demonstration app: you install its dependencies, start the development server, and view the result in a browser at http://localhost:3005. Its purpose is to give developers a runnable reference when following Highlight's official Next.js integration guide. The repository is a small demo project (with only a handful of stars) rather than a full product template.

Key Features

  • Next.js framework — the app is built on Next.js and is documented as a "Next.js application pre-configured with Highlight."
  • Highlight pre-configuration — the repository ships with Highlight already set up rather than requiring you to add the SDK from scratch, so the integration can be inspected in a working app.
  • Fixed dev port — the development server is documented to run at http://localhost:3005, so the app is reachable at a known local address.
  • Yarn-based setup — installation and startup are combined into a single command, yarn install && yarn dev.
  • Walkthrough-linked — the installation section points to Highlight's official Next.js Walkthrough under getting-started / fullstack-frameworks, tying the demo to published setup instructions.

Who is it for?

  • Next.js developers adding monitoring: developers who want to see Highlight wired into a Next.js project before repeating the setup in their own codebase.
  • Developers following the Highlight walkthrough: anyone working through Highlight's Next.js getting-started documentation who wants a reference app to compare their own setup against.
  • Evaluators of Highlight: teams assessing Highlight's Next.js integration who want a small, runnable project to inspect rather than reading docs alone.

What can you do with Next.js Highlight Demo?

  • Inspect a working Highlight integration: clone the repo, run yarn install && yarn dev, and open http://localhost:3005 to examine how Highlight is configured in a Next.js app.
  • Reproduce the official walkthrough: use the demo alongside Highlight's Next.js Walkthrough to verify each configuration step in a live project.
  • Use it as a starting point: copy the Highlight configuration from the demo into your own Next.js application after confirming it runs locally.

How does Next.js Highlight Demo work?

  1. Install dependencies and start the dev server in one step with yarn install && yarn dev.
  2. Open http://localhost:3005 in a browser to load the running Next.js application.
  3. Follow the linked Highlight Next.js Walkthrough to understand and extend the integration.

Screenshot of Next.js Highlight Demo