Skip to content

Using Spotlight with Next.js

Prerequisites

Before integrating Spotlight with Next.js, make sure you have the following prerequisites:

  1. Next.js Project: Ensure you have a Next.js project set up. If you don’t have one, you can create a new Next.js project by following the official documentation.

  2. Sentry Integration: Sentry should already be integrated into your Next.js project. If you haven’t set up Sentry, follow the official documentation.

Installation

Terminal window
npm add @spotlightjs/spotlight

Configuration

Initialize Spotlight within sentry.client.config.js, after you’ve initialized the Sentry:

In the Browser you don’t need to set spotlight: true, Spotlight.init() will automatically detect if Sentry is available and if so, hook into the SDK.

// sentry.client.config.(js/ts)
import * as Sentry from '@sentry/nextjs';
import * as Spotlight from '@spotlightjs/spotlight';
Sentry.init({
dsn: '___DSN___',
// ...other Sentry options
});
if (process.env.NODE_ENV === 'development') {
Spotlight.init();
}

For more options on how to configure Spotlight, see Configuration.

Run the Sidecar

Spotlight’s architecture requires a sidecar to be running alongside your service. This is to enable streaming data collection from your backend services into the Spotlight overlay.