Skip to main content
Subscription is avialable from v3.12.0 for the @novu/nextjs, @novu/react and @novu/js packages.
This quickstart shows how to render the subscription UI in your app. The subscription UI lets users subscribe to topics, define conditions, and manage how they receive notifications.
To learn how to render custom UI for the Subscription preferences, refer to the Headless hooks documentation.
The <Subscription /> component is designed to work within an existing Novu environment and uses the same provider and session context as the Inbox component.
1

​
Create a topic

Subscriptions are managed at the topic level. You can create a topic manually in the Novu Dashboard or via the API.However, you don’t have to create it beforehand. If the topic key you provide to the component does not exist, Novu will automatically create it for you.Topics can represent any category of notifications. To learn more, see the Topics documentation.
2

​
Install @novu/nextjs

Ensure you have the latest version of the @novu/nextjs package installed in your project.
npm install @novu/nextjs
3

​
Initialize the Novu client

Wrap your app or the specific section where the subscription component would live with the <NovuProvider>. Configure the provider with your applicationIdentifier and the current user’s subscriberId.

const NOVU_CONFIG = {
  subscriber="SUBSCRIBER_ID"
  applicationIdentifier="APPLICATION_IDENTIFIER"
};

function App() {
  return (
    <NovuProvider {...NOVU_CONFIG}>
      {/* Application content */}
    </NovuProvider>
  );
}
4

​
Add the component

Place the <Subscription /> component inside the provider. You must pass the topicKey.The identifier prop is optional, you only need to provide it if you intend to manage multiple distinct subscriptions for the same topic.

const NOVU_CONFIG = {
  subscriber="SUBSCRIBER_ID"
  applicationIdentifier="APPLICATION_IDENTIFIER"
};

function App() {
  return (
    <NovuProvider {...NOVU_CONFIG}>
      <Subscription
        topicKey="project-123"
        identifier="project-updates"
      />
    </NovuProvider>
  );
}

​
Next steps

Customize the UI

Customize and configure the Subscription component appearance and behavior.

Overview

Learn how Subscriptions work and explore the available components.