Skip to main content
The Inbox component displays a notification bell by default, which opens a menu containing the subscriber’s notifications and preferences.

​
Installation

To get started, install the Inbox UI: 
npm install @novu/nextjs
@novu/react requires React 18 or later. The package supports React ^18.0.0 and React 19 (^19.0.0). React 17 and below are not supported. When rendering the Inbox UI, you also need react-dom at the same version.

Add Novu Inbox to my Next.js app

Open in Cursor

​
Try Inbox in keyless mode

Keyless mode lets you test the look and features of the Inbox component instantly in your application, no setup required. Inbox keyless 

export function Novu() {
  return (
    <Inbox />
  );
}
This is only for testing, the data is temporary (expires in 24h) and not tied to real subscribers.

​
Use Inbox with real subscribers

To display real-time notifications for your subscribers, connect the Inbox component to your Novu environment using your applicationIdentifier and a subscriberId. You can create or manage subscribers from the Novu Dashboard.

​
US region (default)


export function Novu() {
  return (
    <Inbox
      applicationIdentifier="APPLICATION_IDENTIFIER"
      subscriber="SUBSCRIBER_ID"
    />
  );
}
Sign in to get your own API keys

​
EU region

If your Novu account is in the EU region, then include the backendUrl and socketUrl props to connect to EU-specific API endpoints: 

export function Novu() {
  return (
    <Inbox
      applicationIdentifier="APPLICATION_IDENTIFIER"
      subscriber="SUBSCRIBER_ID"
      backendUrl="https://eu.api.novu.co"
      socketUrl="wss://eu.socket.novu.co"
    />
  );
}
Sign in to get your own API keys