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
uploadSourceMaps boolean
optional
Explicitly enable or disable source map uploading during production builds. By default, source maps are uploaded if both NextConfig.productionBrowserSourceMaps is not true and the API key is set through the apiKey option or HIGHLIGHT_SOURCEMAP_UPLOAD_API_KEY environment variable.
configureHighlightProxy boolean
optional
Configures a rewrite at /highlight-events for proxying Highlight requests.
apiKey string
optional
API key used to link to your Highlight project when uploading source maps. This can also be set through the HIGHLIGHT_SOURCEMAP_UPLOAD_API_KEY environment variable.
appVersion string
optional
App version used when uploading source maps.
serviceName string
optional
Name of your app.
sourceMapsPath string
optional
The file system root directory containing all your source map files.
sourceMapsBasePath string
optional
Base path to append to your source map URLs when uploaded to Highlight.
sourceMapsBackendUrl string
optional
Backend url for private graph to use for uploading (for self-hosted highlight deployments).
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.
})