Welcome to Highlight
Getting Started
Overview
Backend / Server
Client / Frontend
Fullstack Frameworks
Tips
Content-Security-Policy
Local Development
Monkey Patches
Performance Impact
Proxying Highlight
Session Search Deep Linking
Troubleshooting
Upgrading Highlight
Session Replay
Console Messages
HTML iframe Recording
Identifying Users
Live Mode
Network DevTools
Privacy
Rage Clicks
Recording Network Requests and Responses
Session Sharing
Session Shortcut
Tracking Events
Versioning Sessions
Error Monitoring
Grouping Errors
Sourcemaps
Versioning Errors
Product Features
Alerts
Analytics
Canvas
Comments
Environments
Frontend Observability
Keyboard Shortcuts
Performance Data
Segments
Session Search
Team Management
User Feedback
Web Vitals
WebGL
Integrations
Amplitude Integration
Clearbit Integration
Electron Integration
Front Plugin
Intercom Integration
Linear Integration
Mixpanel Integration
React.js Integration
Segment Integration
Sentry Integration
Slack Integration
Vercel Integration
highlight.run Changelog
5.0.0
5.0.1
5.1.0
5.1.1
5.1.2
5.1.3
5.1.4
5.1.5
Menu
Docs / Getting Started / Fullstack Frameworks

Overview

The Highlight Next.js SDK adds additional features to Highlight, including:

Getting Started

The features in this SDK require the Highlight client SDK to be installed, so please follow the Next.js instructions if you have not yet done so.

For server-side linking to Highlight sessions, your call to H.init should include the tracingOrigins setting. If you're going to use withHighlightConfig and proxy your Highlight requests with a rewrite, you should set backendUrl. See H.init() for more details.

H.init('<YOUR_PROJECT_ID>', { ... tracingOrigins: true, backendUrl: '/highlight-events', ... });
Copy
Environment Variables

If you are running your Next.js app in Vercel, you can install our integration to make configuration easier. Add it to your project and configure it from the link above to inject the necessary environment variables.

If you are not using Vercel or would like to configure this manually, you can set an environment variable manually: HIGHLIGHT_SOURCEMAP_UPLOAD_API_KEY = <your API key>, where your API key can be found in the source map section of https://app.highlight.run/settings/errors.

SDK Setup

Import the @highlight-run/next Package

# with npm npm install @highlight-run/next # with yarn yarn add @highlight-run/next
Copy
Wrapping your next.config.js

If you want to configure source map uploads during your production builds and enable the Next.js Highlight proxy rewrite, you can wrap your Next.js config with withHighlightConfig. See withHighlightConfig() for more details.

import { withHighlightConfig } from '@highlight-run/next' export default withHighlightConfig({ // your next.config.js options here })
Copy
Wrapping your API routes

If you want to monitor backend errors, this API wrapper will send your errors to Highlight and link them to the session where the network request was made. Define a withHighlight wrapper with any common options in a common function file. For example, you can create a highlight.config.ts file in the root of your next.js codebase. See Highlight() for more details.

import { Highlight } from '@highlight-run/next' export const withHighlight = Highlight()
Copy

You can then wrap each of your handlers in the Next.js api/ directory with the withHighlight function from the previous step.

import { withHighlight } from '../highlight.config' const handler = async (req, res) => { res.status(200).json({ name: 'Jay' }) } export default withHighlight(handler)
Copy