Next.js | Novu Documentation

Create an account and learn how to start using Novu notification Inbox in your Next.js application.

This guide walks you through integrating Novu’s Inbox into your Next.js application for in-app notifications in real-time, from setup to triggering your first notification. By the end, you'll have a working notification inbox.

Create a Novu account

Create a Novu account or sign in to an existing account

Create a Next.js application

Create a new Next.js app using the command below. Skip this step if you already have an existing project:

npx create-next-app@latest

Install Novu’s inbox package

To install the Inbox package, run:

npm install @novu/nextjs

Create an Inbox component

In the src directory of your Next.js project, create a components/inbox.tsx file with the following content:

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"
    />
  );
}

If you’re signed in to your Novu account, then the and are automatically entered in the code sample above. However if it’s not, here is how to access them:

applicationIdentifier – In the Novu dashboard, click API Keys, and then locate your unique Application Identifier.
subscriberId – This represents a user in your system, usually the user id from your database. For the quick start purposes we are going to use an auto-generated subscriberId for your Dashboard user.

Note: If you pass a subscriberId that does not exist yet, Novu will automatically create a new subscriber with that ID.

In the layout.tsx file, import the NotificationInbox component, and add it to your navbar. By default, it will show a bell icon, which opens the Inbox UI when clicked:

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>
  );
}

Run Your Application

Start your development server:

npm run dev

Once the application is running, a bell icon will appear in the navbar. Clicking it opens the notification inbox UI.

Currently, there are no notifications. Let’s trigger one!

Trigger your first notification

In this step, you'll create a simple workflow to send your first notification via the Inbox component. Follow these steps to set up and trigger a workflow from your Novu dashboard.

Go to your Novu dashboard.
In the sidebar, click Workflows.
Click Create Workflow. Enter a name for your workflow (e.g., "Welcome Notification").
Click Create Workflow to save it.
Click the Add Step icon in the workflow editor and then select In-App as the step type.
In the In-App template editor, enter the following:
- Subject: "Welcome to Novu"
- Body: "Hello, world! "
Once you’ve added the subject and body, close the editor.
Click Trigger.
Click Test Workflow.

Novu Next.js Quickstart Guide

Create a Novu account

Create a Next.js application

Install Novu’s inbox package

Create an Inbox component

Add the notification inbox component to your navbar

Run Your Application

Trigger your first notification

View the notification in your app

Next steps

Styling

Inbox and preferences UI components

Build Workflow

SDKs

On this page