What if adding in-app notifications to your Next.js app only took one command?

Notifications are a cornerstone of modern web applications. Whether it's alerting users to new messages, important updates, or system events, an effective notification system keeps users engaged and informed. But let's be honest, setting up in-app notifications isn't that "fun". As a developer, I've found myself going through the same motions: Installing the necessary SDKs and UI libraries. Creating the basic component structure. Wiring up environment variables. Remembering the specific setup for Next.js versus a standard React (Vite/CRA) app. It's not rocket science, but it's boilerplate that distracts from building core features. That's why I decided to build add-inbox – a simple CLI tool to get you up and running with a beautiful, functional Novu in-app notification inbox in literally seconds. Package: https://www.npmjs.com/package/add-inbox Source Code: https://github.com/iampearceman/add-inbox The "Why": Scratching My Own Itch Every time I started a new project or helped someone integrate Novu (an awesome open-source notification solution), I'd think, "There has to be a quicker way to get the basics in place." I wanted a single command that would: Handle dependencies for my chosen framework (Next.js or React). Scaffold a well-structured, ready-to-use Inbox component. Set up placeholder environment variables. Provide clear next steps. This "small experiment," as I initially called it, quickly became add-inbox. The "How": What add-inbox Does For You Running npx add-inbox@latest init kicks off an interactive process designed to be as seamless as possible. npx add-inbox@latest init Here’s a peek under the hood at what happens: Welcome & Configuration: You're greeted with a friendly snippet of essential information: * Framework Choice: Are you using Next.js or a general React setup (like Create React App or Vite)? This tailors the component and environment variable setup. * Package Manager: Npm, Yarn, or Pnpm? The CLI uses your preferred manager for installations. Safety Checks: * `package.json`: The tool ensures you have a `package.json` file. If not, it offers to initialize one for you using your selected package manager. * Overwrite Protection: If you already have an inbox component at `components/ui/inbox`, it will ask if you want to overwrite it, defaulting to "no" to prevent accidental data loss. Similarly, for Next.js projects, if .env.example exists, it checks for existing Novu variables and asks before appending new ones. Dependency Installation (Step 1): Based on your framework choice, it installs the necessary Novu packages: * For Next.js: `@novu/nextjs` * For React: `@novu/react` and `react-router-dom` (as Novu's React SDK hooks can utilize it). Component Scaffolding (Step 2): This is where the magic happens! It creates a `novuInbox.tsx` file within `components/ui/inbox/`. * Next.js Component: Includes `'use client';` directive, uses `useTheme` from `next-themes` for automatic dark/light mode theme switching with Novu's pre-built themes, and pulls environment variables like `process.env.NEXT_PUBLIC_NOVU_APP_ID`. * React Component: Sets up the `Inbox` from `@novu/react`, attempts to read common environment variable patterns (`REACT_APP_`, `VITE_`), and configures the `useNavigate` hook from `react-router-dom`. The generated component is well-commented, explaining the purpose of `applicationIdentifier`, `subscriberId`, and linking to Novu docs for styling and customization. Environment Configuration (for Next.js): If you're using Next.js, the CLI will help set up your `.env.example` file by adding (or offering to append) placeholders for `NEXT_PUBLIC_NOVU_APP_ID` and `NEXT_PUBLIC_NOVU_SUBSCRIBER_ID`. This is a small but crucial step for getting started quickly. Next Steps & Guidance: Finally, add-inbox prints clear instructions on how to: * Import and use the newly created `NovuInbox` component. * Configure your actual Novu Application ID and Subscriber ID in your environment variables. * Find your Novu credentials. * Links to further Novu documentation for customization (styling, hooks, localization, etc.). Behind the Curtain: The Tech Stack For those interested, add-inbox is a Node.js script that leverages some excellent libraries: prompts: For interactive command-line user interfaces. chalk: For styling terminal output, making it more readable and engaging. fs & path: For file system operations. child_process.execSync: For running package manager commands. The code is structured with helper functions for clarity, handling everything from user prompts to file generation. You can check out the complete code on GitHub. What Were Your Notification Setup Pains? I built add-inbox to solve a problem I frequently encountered. But I'm curious to hear from others: For those of you who've integrated notifi

May 9, 2025 - 21:10

What if adding in-app notifications to your Next.js app only took one command?

Notifications are a cornerstone of modern web applications.

Whether it's alerting users to new messages, important updates, or system events, an effective notification system keeps users engaged and informed.

But let's be honest, setting up in-app notifications isn't that "fun".

As a developer, I've found myself going through the same motions:

Installing the necessary SDKs and UI libraries.
Creating the basic component structure.
Wiring up environment variables.
Remembering the specific setup for Next.js versus a standard React (Vite/CRA) app.

It's not rocket science, but it's boilerplate that distracts from building core features.

That's why I decided to build add-inbox – a simple CLI tool to get you up and running with a beautiful, functional Novu in-app notification inbox in literally seconds.

Package: https://www.npmjs.com/package/add-inbox

Source Code: https://github.com/iampearceman/add-inbox

The "Why": Scratching My Own Itch

Every time I started a new project or helped someone integrate Novu (an awesome open-source notification solution), I'd think, "There has to be a quicker way to get the basics in place." I wanted a single command that would:

Handle dependencies for my chosen framework (Next.js or React).
Scaffold a well-structured, ready-to-use Inbox component.
Set up placeholder environment variables.
Provide clear next steps.

This "small experiment," as I initially called it, quickly became add-inbox.

The "How": What `add-inbox` Does For You

Running npx add-inbox@latest init kicks off an interactive process designed to be as seamless as possible.

npx add-inbox@latest init

Here’s a peek under the hood at what happens:

Welcome & Configuration:
You're greeted with a friendly snippet of essential information:

  * **Framework Choice:** Are you using Next.js or a general React setup (like Create React App or Vite)? This tailors the component and environment variable setup.

  * **Package Manager:** Npm, Yarn, or Pnpm? The CLI uses your preferred manager for installations.

Safety Checks:

  * **`package.json`:** The tool ensures you have a `package.json` file. If not, it offers to initialize one for you using your selected package manager.

  * **Overwrite Protection:** If you already have an inbox component at `components/ui/inbox`, it will ask if you want to overwrite it, defaulting to "no" to prevent accidental data loss.

Similarly, for Next.js projects, if .env.example exists, it checks for existing Novu variables and asks before appending new ones.

Dependency Installation (Step 1):

Based on your framework choice, it installs the necessary Novu packages:

  * For Next.js: `@novu/nextjs`
  * For React: `@novu/react` and `react-router-dom` (as Novu's React SDK hooks can utilize it).

Component Scaffolding (Step 2):

This is where the magic happens! It creates a `novuInbox.tsx` file within `components/ui/inbox/`.

  * **Next.js Component:** Includes `'use client';` directive, uses `useTheme` from `next-themes` for automatic dark/light mode theme switching with Novu's pre-built themes, and pulls environment variables like `process.env.NEXT_PUBLIC_NOVU_APP_ID`.

  * **React Component:** Sets up the `Inbox` from `@novu/react`, attempts to read common environment variable patterns (`REACT_APP_`, `VITE_`), and configures the `useNavigate` hook from `react-router-dom`.



The generated component is well-commented, explaining the purpose of `applicationIdentifier`, `subscriberId`, and linking to Novu docs for styling and customization.

Environment Configuration (for Next.js):

If you're using Next.js, the CLI will help set up your `.env.example` file by adding (or offering to append) placeholders for `NEXT_PUBLIC_NOVU_APP_ID` and `NEXT_PUBLIC_NOVU_SUBSCRIBER_ID`. This is a small but crucial step for getting started quickly.

Next Steps & Guidance:
Finally, add-inbox prints clear instructions on how to:

  * Import and use the newly created `NovuInbox` component.
  * Configure your actual Novu Application ID and Subscriber ID in your environment variables.
  * Find your Novu credentials.
  * Links to further Novu documentation for customization (styling, hooks, localization, etc.).

Behind the Curtain: The Tech Stack

For those interested, add-inbox is a Node.js script that leverages some excellent libraries:

prompts: For interactive command-line user interfaces.
chalk: For styling terminal output, making it more readable and engaging.
fs & path: For file system operations.
child_process.execSync: For running package manager commands.

The code is structured with helper functions for clarity, handling everything from user prompts to file generation.

You can check out the complete code on GitHub.

What Were Your Notification Setup Pains?

I built add-inbox to solve a problem I frequently encountered. But I'm curious to hear from others:

For those of you who've integrated notifications (Novu or otherwise) before, what were the most annoying or time-consuming parts of the setup?
Have you built or used similar tools to streamline this process?

This is just a small experiment for now, and I'm very open to feedback, suggestions, or contributions.

If it helps even a few developers save some time, I'll consider it a success.

Give it a try:

npx add-inbox@latest init

And let me know what you think in the comments below or by opening an issue on GitHub