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 install --save-dev @spotlightjs/spotlight

pnpm add @spotlightjs/spotlight --save-dev

yarn add @spotlightjs/spotlight --dev

2. Configuration

Initialize Spotlight within instrumentation-client.(js|ts), 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.

// instrumentation-client.(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