Next.js Quick Start

Learn how to set up highlight.io with your Next (frontend) application.

Install the npm package & SDK.

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


# with npm
npm install @highlight-run/next

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>
		</>
	)
}

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.

More Next.js features?

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

React.js Using highlight.io with Remix