Using Spotlight with Next.js

By Adding Spotlight to your Next.js application, you can get deep insights into errors and performance issues across your entire application.

1. Installation

npm add @spotlightjs/spotlight

pnpm add @spotlightjs/spotlight

yarn add @spotlightjs/spotlight

2. 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();
}

// sentry.server.config.(js/ts)
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: '___DSN___',
  spotlight: process.env.NODE_ENV === 'development'
  // ...other Sentry options
});

// sentry.edge.config.(js/ts)
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: '___DSN___',
  spotlight: process.env.NODE_ENV === 'development'
  // ...other Sentry options
});

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

3. 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.

Vite

Webpack

Other