> ## Documentation Index
> Fetch the complete documentation index at: https://docs.novu.co/llms.txt
> Use this file to discover all available pages before exploring further.
# Nextjs inbox examples
# Next.js Inbox Examples
## App Router Setup
The Inbox component is client-side only. Create a client component wrapper:
```tsx theme={null}
// components/NotificationInbox.tsx
"use client";
import { Inbox } from "@novu/nextjs";
export function NotificationInbox({
subscriberId,
subscriberHash,
}: {
subscriberId: string;
subscriberHash: string;
}) {
return (
);
}
```
Use it in a server component or layout:
```tsx theme={null}
// 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 (
{children}
);
}
```
## HMAC Hash Generation (Server Utility)
```typescript theme={null}
// 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 Router Setup
```tsx theme={null}
// pages/_app.tsx
import { Inbox } from "@novu/nextjs";
function MyApp({ Component, pageProps }) {
return (
<>
);
}
export default MyApp;
```
## Environment Variables
```bash theme={null}
# .env.local
NEXT_PUBLIC_NOVU_APP_ID=your-app-id # Client-side (public)
NOVU_SECRET_KEY=your-secret-key # Server-side only
```
**Important:** Use `NEXT_PUBLIC_` prefix for the app ID (client-safe). Never expose `NOVU_SECRET_KEY` to the client.
## With Router Integration
Handle notification clicks with Next.js router:
```tsx theme={null}
"use client";
import { Inbox } from "@novu/nextjs";
import { useRouter } from "next/navigation";
export function NotificationInbox({ subscriberId, subscriberHash }) {
const router = useRouter();
return (
router.push(path)}
onNotificationClick={(notification) => {
if (notification.redirect?.url) {
router.push(notification.redirect.url);
}
}}
/>
);
}
```