Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
// components/NotificationInbox.tsx
"use client";
import { Inbox } from "@novu/nextjs";
export function NotificationInbox({
subscriberId,
subscriberHash,
}: {
subscriberId: string;
subscriberHash: string;
}) {
return (
<Inbox
applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_ID!}
subscriberId={subscriberId}
subscriberHash={subscriberHash}
/>
);
}
// app/layout.tsx
import { NotificationInbox } from "../components/NotificationInbox";
import { getSubscriberHash } from "../lib/novu";
export default async function RootLayout({ children }) {
const user = await getCurrentUser();
const subscriberHash = getSubscriberHash(user.id);
return (
<html>
<body>
<nav>
<NotificationInbox
subscriberId={user.id}
subscriberHash={subscriberHash}
/>
</nav>
{children}
</body>
</html>
);
}
// lib/novu.ts
import { createHmac } from "crypto";
export function getSubscriberHash(subscriberId: string): string {
return createHmac("sha256", process.env.NOVU_SECRET_KEY!)
.update(subscriberId)
.digest("hex");
}
// pages/_app.tsx
import { Inbox } from "@novu/nextjs";
function MyApp({ Component, pageProps }) {
return (
<>
<nav>
<Inbox
applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_ID!}
subscriberId={pageProps.subscriberId}
subscriberHash={pageProps.subscriberHash}
/>
</nav>
<Component {...pageProps} />
</>
);
}
export default MyApp;
# .env.local
NEXT_PUBLIC_NOVU_APP_ID=your-app-id # Client-side (public)
NOVU_SECRET_KEY=your-secret-key # Server-side only
NEXT_PUBLIC_ prefix for the app ID (client-safe). Never expose NOVU_SECRET_KEY to the client.
"use client";
import { Inbox } from "@novu/nextjs";
import { useRouter } from "next/navigation";
export function NotificationInbox({ subscriberId, subscriberHash }) {
const router = useRouter();
return (
<Inbox
applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_ID!}
subscriberId={subscriberId}
subscriberHash={subscriberHash}
routerPush={(path) => router.push(path)}
onNotificationClick={(notification) => {
if (notification.redirect?.url) {
router.push(notification.redirect.url);
}
}}
/>
);
}
Was this page helpful?