DocumentationDocumentation
DocumentationGuidesFrameworkCommunityAPI Reference
Sign InSign Up

GitHubnovuhq/novu

36.8K

Quickstart

Novu Next.js Quickstart

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

Learn how to integrate Novu’s Inbox for real-time in-app notifications in your Next.js application. By the end of this guide, you’ll have a working notification inbox that displays messages triggered from the Novu dashboard.

Create a Novu account

Create a Novu account or sign in to access the Novu dashboard.

Install @novu/nextjs

In your Next.js project, run the following command to install the Novu Inbox SDK:

npm install @novu/nextjs

Add the notification Inbox to your app

Import Novu’s built-in <Inbox /> component into your layout file and place it in the navbar:

components/inbox.tsx
 
  import { Inbox } from '@novu/nextjs';
  import './globals.css';
 
  export const metadata = {
    title: 'Novu Next.js Quickstart',
    description: 'Generated by create next app',
  };
 
  export default function RootLayout({ children }) {
    return (
      <html lang="en">
        <body>
          <nav className="flex justify-end items-center p-4 gap-4 h-16">
            <Inbox
              applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
              subscriberId="YOUR_SUBSCRIBER_ID"
            />
          </nav>
          {children}
        </body>
      </html>
    );
  }

If you are signed in to your Novu account, then the and will be automatically populated. Otherwise, retrieve them from:

  • applicationIdentifier: On the Novu dashboard, click API Keys, and copy your unique Application Identifier.
  • subscriberId: This represents a user in your system, usually the user ID from your database. For testing, you can use the auto-generated subscriberId from your Novu dashboard. You can locate it under the Subscribers tab on the Novu dashboard.

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

Run your application

Start your development server:

npm run dev

Once your application is running, you would see a bell icon in the navbar. Click on it, to open the notification Inbox UI.

There are no notifications yet, so 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.

  1. Go to your Novu dashboard.
  2. Click Workflows.
  3. Click Create Workflow and then enter a name (e.g., "Welcome Notification").
  4. Click Create Workflow to save it.
  5. Click the Add Step icon in the workflow editor and then select In-App as the step type.
  6. In the In-App template editor, enter:
    • Subject: "Welcome to Novu"
    • Body: "Hello, world!"
  7. Once you’ve added the subject and body, close the editor.
  8. Click Trigger.
  9. Click Test Workflow.

View the notification in your app

Go back to your Next.js app, then click the bell icon.

You should see the notification you just sent from Novu! 🎉

Next steps

Styling

Customize the look and feel of your Inbox to match your application's design.

Inbox and preferences UI components

Explore our full-stack UI components libraries for building in-app notifications.

Build Workflow

Design and manage advanced notification workflows.

Multi Tenancy

Manage multiple tenants within an organization.

Edit on GitHub

React

Create an account and learn how to start using Novu Inbox Notification in your application.

Remix

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

On this page