diff --git a/docs/product/dashboards/sentry-dashboards/img/nextjs-overview-dash.png b/docs/product/dashboards/sentry-dashboards/img/nextjs-overview-dash.png new file mode 100644 index 0000000000000..13a677df5fd8b Binary files /dev/null and b/docs/product/dashboards/sentry-dashboards/img/nextjs-overview-dash.png differ diff --git a/docs/product/dashboards/sentry-dashboards/img/nextjs-server-ssr.png b/docs/product/dashboards/sentry-dashboards/img/nextjs-server-ssr.png new file mode 100644 index 0000000000000..c3c9dc43700b3 Binary files /dev/null and b/docs/product/dashboards/sentry-dashboards/img/nextjs-server-ssr.png differ diff --git a/docs/product/dashboards/sentry-dashboards/index.mdx b/docs/product/dashboards/sentry-dashboards/index.mdx index 349e6b7e46731..8b9d638613c68 100644 --- a/docs/product/dashboards/sentry-dashboards/index.mdx +++ b/docs/product/dashboards/sentry-dashboards/index.mdx @@ -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 diff --git a/docs/product/dashboards/sentry-dashboards/nextjs.mdx b/docs/product/dashboards/sentry-dashboards/nextjs.mdx new file mode 100644 index 0000000000000..cf2d214cd7ba9 --- /dev/null +++ b/docs/product/dashboards/sentry-dashboards/nextjs.mdx @@ -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.