Star us on GitHub
Star
Menu

Using highlight.io with Next.JS

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
# with yarn yarn add @highlight-run/next
Copy
# with pnpm pnpm add @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
Add the ErrorBoundary component. (optional)

The ErrorBoundary component wraps your component tree and catches crashes/exceptions from your react app. When a crash happens, your users will be prompted with a modal to share details about what led up to the crash. Read more here.

import { ErrorBoundary } from '@highlight-run/next/client'; export default function App({ Component, pageProps }: AppProps) { // other page level logic ... return ( <ErrorBoundary> <Component {...pageProps} /> </ErrorBoundary> ); }
Copy
4
Identify users.

Identify users after the authentication flow of your web app. We recommend doing this in any asynchronous, client-side context.

The first argument of identify will be searchable via the property identifier, and the second property is searchable by the key of each item in the object.

For more details, read about session search or how to identify users.

import { H } from '@highlight-run/next/client'; function Login(username: string, password: string) { // login logic here... // pass the user details from your auth provider to the H.identify call H.identify('jay@highlight.io', { id: 'very-secure-id', phone: '867-5309', bestFriend: 'jenny' }); }
Copy
5
Verify installation

Check your dashboard for a new session. Don't see anything? Send us a message in our community and we can help debug.

6
Configure sourcemaps in CI. (optional)

To get properly enhanced stacktraces of your javascript app, we recommend instrumenting sourcemaps. If you deploy public sourcemaps, you can skip this step. Refer to our docs on sourcemaps to read more about this option.

# Upload sourcemaps to Highlight ... npx --yes @highlight-run/sourcemap-uploader upload --apiKey ${YOUR_ORG_API_KEY} --path ./build ...
Copy
7
More Next.js features?

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