Getting Started with SuprSend Inbox in a Next.js Application

Building notifications from scratch is hard. Really hard. As a frontend developer, you’ve probably thought to yourself:
“How do I show real-time notifications? How do I mark them as read? What if I want to send notifications via email or SMS too?”

Most notification systems are more complex than you might think.
What if you could avoid all that and just focus on your product?

SuprSend Inbox gets rid of this. Whether you’re looking for a plug-and-play notification center or a fully custom experience, SuprSend delivers a scalable, real-time, multi-channel notification system with minimal setup.

---

What is SuprSend Inbox?

SuprSend Inbox is a ready-to-use notification system for your web app. It handles:

• Real-time notification delivery.

• Read/unread state management.

• Different ways to connect (in-app, email, SMS, etc).

• Should be easy to integrate with your frontend.

You can use the default user interface for speed or build your own with the headless hooks for full control over the UI.

---

Why Use SuprSend Inbox?

Let's be honest.

• Would you rather use weeks creating notification logic, or ship features your customer love?

• Would you rather deal with real-time sync issues yourself or have it done for you?

SuprSend Inbox lets you:

• Save time: Don't waste time on notifications plumbing, focus on your core app.

• To move quickly, you can use the default UI or build your own as needed.

• Begin with simplicity and upgrade to sophistication as your needs evolve without rewriting.

---

1. Setting Up Your Next.js Project

Ready to get started? You can follow along with the sample repo (swap in your own repo if you fork it).

Step 1: Install dependencies

npm install @suprsend/react @suprsend/node-sdk

Step 2: Add environment variables

Make a file called .env.local inside your project root.

NEXT_PUBLIC_SUPRSEND_WORKSPACE_KEY=your_workspace_key
SUPRSEND_API_KEY=your_api_key
SUPRSEND_API_SECRET=your_api_secret

Never put your secrets in Git!

Step 3: Plan your user model

SuprSend identifies users by a subscriberId. Most app users are either unaware or unconcerned with having user IDs.

---

2. Integrating the Default SuprSend Inbox

Want to see notifications in your app in under 10 minutes? Let's use the default <Inbox /> component.

Step 1: Set up the provider

SuprSend needs to know which user is currently logged in. We will create a context provider in order to use subscriberId and wrap our app with it. This makes the current user readily available anywhere in your component tree.

// app/contexts/SuprSendProvider.tsx
import { SuprSendProvider } from "@suprsend/react";
import { useState, createContext, useContext } from "react";

const SuprSendContext = createContext(null);

export function SuprSendProviderWrapper({ children }) {
  const [subscriberId, setSubscriberId] = useState("user_123"); // Replace with your auth logic
  return (
    <SuprSendContext.Provider value={{ subscriberId, setSubscriberId }}>
      <SuprSendProvider workspaceKey={process.env.NEXT_PUBLIC_SUPRSEND_WORKSPACE_KEY} subscriberId={subscriberId}>
        {children}
      </SuprSendProvider>
    </SuprSendContext.Provider>
  );
}

export const useSuprSend = () => useContext(SuprSendContext);

The provider will allow every element in your app to be able to access the current logged in user’s subscriberId while also ensuring that it can be updated whenever necessary.

Step 2: Render the default Inbox

Now, let's add the default SuprSend Inbox component. Our notification center works perfectly! It has real-time updates, pagination, marking as read/unread and much more.

// app/components/DefaultInbox.tsx
import { Inbox } from "@suprsend/react";
import { useSuprSend } from "../contexts/SuprSendProvider";

export function DefaultInbox() {
  const { subscriberId } = useSuprSend();
  return (
    <div>
      <h2>Notifications</h2>
      <Inbox pageSize={20} />
    </div>
  );
}

You don’t have to write any logic for getting, updating, or marking them as read. SuprSend handles it all.

Step 3: Add to your main page

Last but not least, wrap your app with the provider and render the inbox.

// app/page.tsx
import { DefaultInbox } from "./components/DefaultInbox";
import { SuprSendProviderWrapper } from "./contexts/SuprSendProvider";

export default function Home() {
  return (
    <SuprSendProviderWrapper>
      <DefaultInbox />
    </SuprSendProviderWrapper>
  );
}

Try it out: Launch your app and check out the notification inbox. It updates in real-time, and you don’t need to write any backend code yet!

---

3. Sending Notifications (Backend API Route)

How do you actually send notifications? Let's make a basic API route in Next.js.

// app/api/notify/route.ts
import { Suprsend, Event } from "@suprsend/node-sdk";
import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const { subscriberId, message, channels, title } = await request.json();
  const suprSend = new Suprsend(
    process.env.SUPRSEND_API_KEY,
    process.env.SUPRSEND_API_SECRET
  );
  const event = new Event(subscriberId, "multi_channel_notification", {
    $channels: channels,
    $inbox: { enabled: channels.includes("inbox"), ttl: 86400 },
    title,
    body: message,
  });
  const response = await suprSend.track_event(event);
  return NextResponse.json({ success: response.success });
}

How would you use this?

• When a user triggers an action, call this API from your frontend.

• Send a test notification from Postman or from the fetch API in your browser.

For instance, you can add a simple form in the application through which testing notifications get triggered.

---

4. Building a Headless (Custom) Inbox

Want to match your app's design perfectly? With SuprSend's headless hooks, you can create your own notification UI while we take care of the backend logic for you.

Here's how you can create a custom inbox.

// app/components/HeadlessInbox.tsx
import { useFeed, SuprSendFeedProvider } from "@suprsend/react";

function HeadlessInboxContent() {
  const feedContext = useFeed();
  const notifications = feedContext?.feedData?.notifications || [];
  return (
    <ul>
      {notifications.map((notif) => (
        <li key={notif.id}>
          <strong>{notif.title}</strong>: {notif.body}
        </li>
      ))}
    </ul>
  );
}

export function HeadlessInbox() {
  return (
    <SuprSendFeedProvider>
      <HeadlessInboxContent />
    </SuprSendFeedProvider>
  );
}

What can you do with this?

• Create a button for each notification that says Mark as read.

• Show the count of unread messages in the app header.

• Make new notifications move for extra fun.

• Make the list match your brand style.

This method allows you to manage the UI entirely while still letting SuprSend manage the data and real-time updates.

---

5. Default Inbox vs. Headless Inbox: Which Should You Use?

Let's compare the two approaches.

Headless Inbox (Custom UI) is a more demanding option than Default Inbox.

Ask yourself:

• Need to ship fast? → Try the default inbox.

• How about having an experience that’s 100% branded? → Go headless.

You can start with inbox by default and convert to headless later on without changing anything at the backend.

---

6. Explore the Sample Project

Want to see all this in action?
Check out the GitHub repo for a complete working example, including both default and headless inbox implementations, backend API routes, and setup instructions.

Clone it, run it locally, and customize the inbox for your own app!

Wanna test the demo, here you go!

---

Conclusion

You can start simple and scale without needing to rewrite with SuprSend Inbox.
Initiate with the rapid default inbox and shift to a custom UI with the same powerful backend as your needs grow.

What will you create now that notifications are so effortless?
Go build something awesome. Your users are waiting for those notifications!