Next.js SDK

Enbbox Next.js SDK (@enbbox/nextjs) — server-side notification management for Next.js apps. Workflow serving, API routes, and server component support.

The @enbbox/nextjs SDK provides optimized components for Next.js applications, with support for both App Router and Pages Router.

Installation

npm install @enbbox/nextjs

App Router (Recommended)

Since Enbbox components are interactive, wrap them in a client component:

"use client";

import { Inbox } from "@enbbox/nextjs";

export function NotificationInbox() {
  return (
    <Inbox
      projectId={process.env.NEXT_PUBLIC_ENBBOX_PROJECT_ID!}
      subscriberId="user-123"
    />
  );
}

Then use it in your layout or page:

import { NotificationInbox } from "@/components/notification-inbox";

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <nav>
          <NotificationInbox />
        </nav>
        {children}
      </body>
    </html>
  );
}

Pages Router

import { Inbox } from "@enbbox/nextjs";

export default function MyPage() {
  return <Inbox projectId="YOUR_PROJECT_ID" subscriberId="user-123" />;
}

Using Hooks

All hooks from @enbbox/react are re-exported:

"use client";

import { useNotifications, useCounts } from "@enbbox/nextjs/hooks";

export function NotificationBadge() {
  const { counts } = useCounts({ filters: [{ read: false }] });
  const unread = counts?.[0]?.count ?? 0;
  return unread > 0 ? <span className="badge">{unread}</span> : null;
}

With HMAC Authentication

For production, generate an HMAC hash on your server to securely identify subscribers:

"use client";

import { Inbox } from "@enbbox/nextjs";

export function SecureInbox({ subscriberId, subscriberHash }) {
  return (
    <Inbox
      projectId={process.env.NEXT_PUBLIC_ENBBOX_PROJECT_ID!}
      subscriberId={subscriberId}
      subscriberHash={subscriberHash}
    />
  );
}

What's Included

@enbbox/nextjs re-exports everything from @enbbox/react:

Component	Description
`<Inbox />`	Complete notification inbox with bell icon
`<Notifications />`	Notification list without the bell
`<Preferences />`	Subscriber preference management
`<Bell />`	Bell icon with unread count badge
`<EnbboxProvider />`	Context provider for custom layouts