Set up the Inbox

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

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.

import { Inbox } from '@novu/nextjs';
 
export function Novu() {
  return (
    <Inbox />
  );
}

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)

import { Inbox } from '@novu/nextjs';
 
export function Novu() {
  return (
    <Inbox
      applicationIdentifier="APPLICATION_IDENTIFIER"
      subscriber="SUBSCRIBER_ID"
    />
  );
}

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:

import { Inbox } from '@novu/nextjs';
 
export function Novu() {
  return (
    <Inbox
      applicationIdentifier="APPLICATION_IDENTIFIER"
      subscriber="SUBSCRIBER_ID"
      backendUrl="https://eu.api.novu.co"
      socketUrl="wss://eu.socket.novu.co"
    />
  );
}