The Highlight Next.js SDK adds additional features to Highlight, including:
server-side error monitoring and linking to Highlight sessions: Highlight()
automatic configuration of source map uploads: withHighlightConfig()
automatic proxying for Highlight requests using Next.js rewrites: withHighlightConfig()
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.
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.
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.
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.
You can then wrap each of your handlers in the Next.js
api/ directory with the
withHighlight function from the previous step.