Next.js | Novu Documentation

Quickstart

Before you can start integrating Novu into your application, you need to create a Novu account and set up a new workflow in the Novu Dashboard. This guide walks you through those steps.

Create a Novu account

If you don't have a Novu account, you can create one here.

Create a new Next.js application

You can use the following command to create a new Next.js application, or use your own and continue from the next step.

npx create-next-app@latest

Install the Inbox package

To install the Inbox package, run the following command:

npm install @novu/nextjs

Create the Inbox component

To start using the Inbox component, you need to embed it in your application. Import the <Inbox /> component and pass the and to the component.

components/inbox.tsx

'use client';
import React from 'react';
import { Inbox } from '@novu/nextjs';
 
 
export function NotificationInbox() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
    />
  );
}

Add the Inbox to your navbar

Now you can import the NotificationInbox component and add it to your navbar, it will automatically display the Bell icon, you can customize it later.

app/layout.tsx

import { NotificationInbox } from "@/components/inbox"; 
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <nav>
          <NotificationInbox />
        </nav>
        {children}
      </body>
    </html>
  );
}

Create your first subscriber

Novu will automatically create a subscriber when a new subscriberId was detected from the Inbox component props.

npm run dev

Trigger your first notification

Now you have setup the Notification Center and created a subscriber, it's time to trigger your first notification workflow.
Visit Dashboard

Get started with Inbox using Novu and Next.js

Quickstart

Next steps

Inbox and preferences UI components

Styling

Multi-tenancy

Localization

Environments

On this page