> ## Documentation Index
> Fetch the complete documentation index at: https://launchdarkly-preview.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Distributed Tracing in Next.js Apps

> ![Watch on YouTube](https://youtube.com/live/z9g-eOPwndk)

> For the complete documentation index, see [llms.txt](/llms.txt). For the full documentation snapshot, see [llms-full.txt](/llms-full.txt).

<p class="publishedDate">
  <em>Published June 6, 2024</em>
</p>

<img src="https://files.buildwithfern.com/https://launchdarkly.docs.buildwithfern.com/docs/63cb9d63fa778fd6ff2f88359ad557fea8b27d2a295983e2ffc79e6547d08e1d/assets/images/authors/chris-esplin.png" alt="portrait of Chris Esplin." class="authorAvatar" />

<p class="authorName">
  by Chris Esplin
</p>

[![Watch on YouTube](https://files.buildwithfern.com/https://launchdarkly.docs.buildwithfern.com/docs/9c31be8fe998df3fb8d68d9e8c940489e8b630fdca2c19754ca537e93118e0b7/assets/images/tutorials/distributed-tracing-in-next/distributed-tracing-livestream-16x9-play.png)](https://youtube.com/live/z9g-eOPwndk)

## What is Distributed Tracing?

Distributed tracing allows us to understand the performance and monitor the execution of complex distributed applications that span multiple services. It links operations across services together into a single trace, making it easier to identify bottlenecks and debug issues.

## Installing the Launch

Darkly SDK

To instrument distributed tracing in Next.js, you first need to add the LaunchDarkly SDK to your Next.js client code. This automatically injects trace headers into outgoing requests from the browser.

<Frame caption="LaunchDarkly SDK installation in a Next.js layout.tsx file for distributed tracing.">
  ![LaunchDarkly SDK installation in a Next.js layout.tsx file for distributed tracing](https://files.buildwithfern.com/https://launchdarkly.docs.buildwithfern.com/docs/37d7c3d7be0b8cba9c8cadf6551b93cfeab65d749de62f02b8bce986cb02edf6/assets/images/tutorials/distributed-tracing-in-next/layout.png)
</Frame>

On the server-side Next.js code, you use middleware to extract the incoming trace headers and propagate them via W3C trace context headers to any downstream service calls made by your API routes. These context headers contain a unique trace ID as well as details on parent/child relationships between operations.

Any downstream services, such as a Go microservice, can then implement middleware to extract the incoming trace context headers. This allows them to associate their operations with the correct trace, while still having the flexibility to start new nested spans for particular code blocks.

## Visualize Traces Across Your Entire Service Stack

With this distributed tracing setup, you can collect end-to-end traces spanning the client, Next.js backend, and all microservices. A tool like LaunchDarkly is critical for collecting and visualizing these traces. The waterfall visualization clearly shows the timing of each operation and their parent/child relationships, making it easy to pinpoint performance issues across services.

<Frame caption="Waterfall visualization of a distributed trace spanning the client, Next.js backend, and microservices.">
  ![Waterfall visualization of a distributed trace spanning the client, Next.js backend, and microservices](https://files.buildwithfern.com/https://launchdarkly.docs.buildwithfern.com/docs/9268635fa2c28eb6d855b2c5980b5de801783e2691de1dc6e5c1e87aeb6c7a16/assets/images/tutorials/distributed-tracing-in-next/trace-screenshot-with-callouts.png)
</Frame>

As open source standards, the W3C trace context propagation headers used in this approach will work with any observability vendor's tracing tools. However, the Open Telemetry project takes an even more vendor-neutral approach that can simplify instrumentation further.