<Subscription /> Quickstart

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.

Install @novu/nextjs

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

npm install @novu/nextjs

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.

import { NovuProvider } from '@novu/nextjs';
 
const NOVU_CONFIG = {
  subscriber="SUBSCRIBER_ID"
  applicationIdentifier="APPLICATION_IDENTIFIER"
};
 
function App() {
  return (
    <NovuProvider {...NOVU_CONFIG}>
      {/* Application content */}
    </NovuProvider>
  );
}

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.

import { NovuProvider, Subscription } from '@novu/nextjs';
 
const NOVU_CONFIG = {
  subscriber="SUBSCRIBER_ID"
  applicationIdentifier="APPLICATION_IDENTIFIER"
};
 
function App() {
  return (
    <NovuProvider {...NOVU_CONFIG}>
      <Subscription
        topicKey="project-123"
        identifier="project-updates"
      />
    </NovuProvider>
  );
}