Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/product/dashboards/sentry-dashboards/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ Like all dashboards, Sentry Dashboards can be [filtered](/product/dashboards/#gl

| Dashboard | Description |
|-----------|-------------|
| **Next.js Overview** | Holistic view for Next.js: traffic, performance, client- and server-side issues, Web Vitals, rage & dead clicks. Tree-based SSR view for performance bottlenecks. |
| **Next.js Overview** | Holistic view for Next.js: traffic, performance, client- and server-side issues, Web Vitals, rage & dead clicks. Tree-based SSR view for performance bottlenecks. [Learn more](/product/dashboards/sentry-dashboards/nextjs/) |
| **Laravel Overview** | Backend performance, error rates, and request throughput for Laravel. Metrics most relevant to Laravel developers out of the box. |

## Investigate
Expand Down
50 changes: 50 additions & 0 deletions docs/product/dashboards/sentry-dashboards/nextjs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
title: Next.js Overview
sidebar_order: 50
description: >-
Monitor your Next.js application with a holistic view of client and server performance, Web Vitals, issues, and SSR bottlenecks.
---

The **Next.js Overview** dashboard gives you a combined view of client-side and server-side performance for your Next.js application. It surfaces Web Vitals, page load and navigation metrics, server transaction performance, and SSR rendering bottlenecks in one place.

![Next.js Overview dashboard showing pageloads, API latency, performance score, rage clicks, and client transactions. =800x](./img/nextjs-overview-dash.png)

## Widgets

The top section of the dashboard includes the following widgets:

- **Pageloads**: Total page loads over time, with release markers.
- **API Latency**: P95 span duration for API routes.
- **Issue Counts**: New and resolved issue counts over time.
- **Performance Score**: Aggregate [Web Vitals](/product/dashboards/sentry-dashboards/frontend/web-vitals/) score (LCP, CLS, INP, FCP, TTFB) displayed as a donut chart.
- **Rage and Dead Clicks**: Pages with the most rage clicks (repeated clicks from user frustration) and dead clicks (clicks that produce no response).
- **Slow SSR**: Server-side rendering durations for the slowest components over time.

## Client Transactions

The **Client Transactions** table lists browser-side transactions grouped by operation type:

| Operation | Description |
|-----------|-------------|
| `pageload` | Full page loads (initial navigation) |
| `navigation` | Client-side route transitions |
| `ui.interaction.click` | Click interactions |
| `ui.interaction.press` | Press interactions |

Each row shows views, error rate, average and P95 duration, and a [performance score](/product/insights/frontend/web-vitals/) where applicable.

## Server Transactions

The **Server Transactions** table lists your server-side routes ranked by traffic. Each row shows views, error rate, average and P95 duration, and total time spent. Use this to identify slow or error-prone routes.

![Server Transactions table and SSR File Tree showing server route performance and component-level rendering times. =800x](./img/nextjs-server-ssr.png)

## SSR File Tree

The **SSR File Tree** widget maps your Next.js file-system routes to server-side rendering performance. It shows the component hierarchy (layouts, pages, and their child components) with error rates, average duration, and P95 duration for each node.

Use this to identify which specific layout or page component is contributing to slow server-side renders.

## Getting Started

The Next.js Overview dashboard appears automatically when you have a Next.js project sending data to Sentry. Set up the [Sentry Next.js SDK](/platforms/javascript/guides/nextjs/) to start collecting the required telemetry.
Loading