Backend: Error Monitoring
Go
Java
JS
Python
Ruby
Rust
Backend: Logging
Go
JS
Python
Ruby
Java
Rust
Hosting Providers
Backend: Tracing
Go
Node.js
Python
Rust
Native OpenTelemetry
Fullstack Frameworks
Overview
Self Host & Local Dev
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
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>
</>
)
}
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.