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

npm

npm add @spotlightjs/spotlight

pnpm

pnpm add @spotlightjs/spotlight

yarn

yarn add @spotlightjs/spotlight

Configuration

Caution

Requires @sentry/nextjs version 7.82.0 or higher.

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

Client

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

Server

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

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

Edge

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

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