Star us on GitHub
Star
Menu

Next.js Quick Start

Learn how to set up highlight.io with your Next (frontend) application.
1
Install the npm package & SDK.

Install the npm package @highlight-run/next in your terminal.

# with npm npm install @highlight-run/next
Copy
2
Initialize the client SDK.

Grab your project ID from app.highlight.io/setup, and set it as the projectID in the <HighlightInit/> component.

If you're using the original Next.js Page router, drop <HighlightInit /> in your _app.tsx file. For the App Router, add it to your top-level layout.tsx file.

// src/app/layout.tsx import { HighlightInit } from '@highlight-run/next/client' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <> <HighlightInit projectId={'<YOUR_PROJECT_ID>'} serviceName="my-nextjs-frontend" tracingOrigins networkRecording={{ enabled: true, recordHeadersAndBody: true, urlBlocklist: [], }} /> <html lang="en"> <body>{children}</body> </html> </> ) }
Copy
3
Verify installation

Check your dashboard for a new session. Make sure to remove the Status is Completed filter to see ongoing sessions. Don't see anything? Send us a message in our community and we can help debug.

4
More Next.js features?

See our fullstack Next.js guide for more information on how to use Highlight with Next.js.