Next.JS SDK API Reference

Next.js SDK

Highlight's Next.js SDK makes it easier to configure your Next.js app for session recording. It ships with helper functions to upload frontend source maps, proxy your Highlight requests, and monitor errors and metrics on your backend.

Just getting started?

Check out our getting started guide to get up and running quickly.

Highlight

Highlight() generates a function that you can use to wrap your API handlers to provide backend error monitoring. If an error is thrown during the handler's execution, it is sent to Highlight and linked to the frontend session which caused the error. Typically, you would configure any necessary settings, and then export a common wrapper you can use to wrap all of your API handlers.

Method Parameters

import { PageRouterHighlight } from "@highlight-run/next/server";
 
export const withPageRouterHighlight = PageRouterHighlight({projectID: '<YOUR_PROJECT_ID>'});

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

withHighlightConfig

You can wrap your next.config.js settings with this function to automatically configure source map uploading and creating a rewrite to proxy Highlight requests. This function sets productionBrowserSourceMaps=true, adds a rewrite rule to return HTTP 404 for any .map files (to keep source map files private), uploads source maps to Highlight following any production build, and adds a rewrite rule from /highlight-events to pub.highlight.run for Highlight request proxying

Method Parameters


import { withHighlightConfig } from "@highlight-run/next/config";
export default withHighlightConfig({
  // your next.config.js options here

  // Note, withHighlightConfig works for Next version 
  // >= v12.1.0. withHighlightConfig returns a promise, 
  // which may be incompatible with other Next.js 
  // config generators that have not been well maintained.
})