feat(js): Com 145 introduce novunextjs

novu.code-workspace

@@ -104,6 +104,10 @@
       "name": "📦 @novu/react",
       "path": "packages/react"
     },
+    {
+      "name": "📦 @novu/nextjs",
+      "path": "packages/nextjs"
+    },
     {
       "name": "🎮 @novu/nextjs-playground",
       "path": "playground/nextjs"

packages/nextjs/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# JetBrains IDE files
+.idea/
+
+# testing
+/coverage
+
+# production
+/dist
+
+# misc
+.DS_Store
+*.pem
+tsconfig.tsbuildinfo
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

packages/nextjs/README.md

@@ -0,0 +1,145 @@
+# Novu's NextJS SDK for <Inbox />.
+
+Novu provides the `@novu/nextjs` library that helps to add a fully functioning <Inbox /> to your web application in minutes.
+See full documentation [here](https://docs.novu.co/inbox/react/get-started).
+
+## Installation
+
+- Install `@novu/nextjs` npm package in your nextjs app
+
+```bash
+npm install @novu/nextjs
+```
+
+## Getting Started
+
+- Add the below code in the app.tsx file
+
+```jsx
+import { Inbox } from '@novu/nextjs';
+
+function Novu() {
+  return (
+    <Inbox
+      options={{
+        subscriberId: 'SUBSCRIBER_ID',
+        applicationIdentifier: 'APPLICATION_IDENTIFIER',
+      }}
+    />
+  );
+}
+```
+
+## Controlled Inbox
+
+You can use the `open` prop to manage the Inbox popover open state.
+
+```jsx
+import { Inbox } from '@novu/nextjs';
+
+function Novu() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div>
+      <Inbox
+        options={{
+          subscriberId: 'SUBSCRIBER_ID',
+          applicationIdentifier: 'APPLICATION_IDENTIFIER',
+        }}
+        open={isOpen}
+      />
+      <button onClick={() => setOpen(true)}>Open Inbox</button>
+      <button onClick={() => setOpen(false)}>Close Inbox</button>
+    </div>
+  );
+}
+```
+
+## Localization
+
+You can pass the `localization` prop to the Inbox component to change the language of the Inbox.
+
+```jsx
+import { Inbox } from '@novu/nextjs';
+
+function Novu() {
+  return (
+    <Inbox
+      options={{
+        subscriberId: 'SUBSCRIBER_ID',
+        applicationIdentifier: 'APPLICATION_IDENTIFIER',
+      }}
+      localization={{
+        'inbox.status.archived': 'Archived',
+        'inbox.status.unread': 'Unread',
+        'inbox.status.options.archived': 'Archived',
+        'inbox.status.options.unread': 'Unread',
+        'inbox.status.options.unreadRead': 'Unread/Read',
+        'inbox.status.unreadRead': 'Unread/Read',
+        'inbox.title': 'Inbox',
+        'notifications.emptyNotice': 'No notifications',
+        locale: 'en-US',
+      }}
+    />
+  );
+}
+```
+
+## HMAC Encryption
+
+When Novu's user adds the Inbox to their application they are required to pass a `subscriberId` which identifies the user's end-customer, and the application Identifier which is acted as a public key to communicate with the notification feed API.
+
+A malicious actor can access the user feed by accessing the API and passing another `subscriberId` using the public application identifier.
+
+HMAC encryption will make sure that a `subscriberId` is encrypted using the secret API key, and those will prevent malicious actors from impersonating users.
+
+### Enabling HMAC Encryption
+
+In order to enable Hash-Based Message Authentication Codes, you need to visit the admin panel In-App settings page and enable HMAC encryption for your environment.
+
+<Frame caption="How to enable HMAC encryption for In-App Inbox">
+  <img src="/images/notification-center/client/react/get-started/hmac-encryption-enable.png" />
+</Frame>
+
+1. Next step would be to generate an HMAC encrypted subscriberId on your backend:
+
+```jsx
+import { createHmac } from 'crypto';
+
+const hmacHash = createHmac('sha256', process.env.NOVU_API_KEY).update(subscriberId).digest('hex');
+```
+
+2. Then pass the created HMAC to your client side application forward it to the component:
+
+```jsx
+<Inbox
+  subscriberId={'SUBSCRIBER_ID_PLAIN_VALUE'}
+  subscriberHash={'SUBSCRIBER_ID_HASH_VALUE'}
+  applicationIdentifier={'APPLICATION_IDENTIFIER'}
+/>
+```
+
+> Note: If HMAC encryption is active in In-App provider settings and `subscriberHash`
+> along with `subscriberId` is not provided, then Inbox will not load
+
+## Use your own backend and socket URL
+
+By default, Novu's hosted services for API and socket are used. If you want, you can override them and configure your own.
+
+```tsx
+import { Inbox } from '@novu/nextjs';
+
+function Novu() {
+  return (
+    <Inbox
+      options={{
+        backendUrl: 'YOUR_BACKEND_URL',
+        socketUrl: 'YOUR_SOCKET_URL',
+        subscriberId: 'SUBSCRIBER_ID',
+        applicationIdentifier: 'APPLICATION_IDENTIFIER',
+      }}
+    />
+  );
+}
+```

packages/nextjs/hooks/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/hooks/index.js",
+  "module": "../dist/hooks/index.mjs",
+  "types": "../dist/hooks/index.d.ts"
+}

packages/nextjs/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@novu/nextjs",
+  "version": "2.4.0",
+  "repository": "https://github.com/novuhq/novu",
+  "description": "Novu's Next.js SDK for building custom inbox notification experiences",
+  "author": "",
+  "license": "ISC",
+  "main": "dist/client/index.js",
+  "module": "dist/client/index.mjs",
+  "types": "dist/client/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/client/index.d.mts",
+        "default": "./dist/client/index.mjs"
+      },
+      "require": {
+        "types": "./dist/client/index.d.ts",
+        "default": "./dist/client/index.js"
+      }
+    },
+    "./hooks": {
+      "import": {
+        "types": "./dist/hooks/index.d.mts",
+        "default": "./dist/hooks/index.mjs"
+      },
+      "require": {
+        "types": "./dist/hooks/index.d.ts",
+        "default": "./dist/hooks/index.js"
+      }
+    },
+    "./themes": {
+      "import": {
+        "types": "./dist/themes/index.d.mts",
+        "default": "./dist/themes/index.mjs"
+      },
+      "require": {
+        "types": "./dist/themes/index.d.ts",
+        "default": "./dist/themes/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "dist/client/**/*",
+    "dist/hooks/**/*",
+    "dist/themes/**/*",
+    "hooks/**/*",
+    "themes/**/*"
+  ],
+  "sideEffects": false,
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build:watch": "tsup --watch",
+    "build": "tsup && pnpm run check-exports",
+    "lint": "eslint src",
+    "check-exports": "attw --pack ."
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.15.4",
+    "@types/node": "^20.14.12",
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "tsup": "^8.2.1",
+    "typescript": "5.6.2"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17",
+    "next": ">=13"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@novu/react": "workspace:*"
+  },
+  "nx": {
+    "tags": ["package:public"]
+  }
+}

packages/nextjs/src/components/Inbox.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import React from 'react';
+import { InboxProps, Inbox as RInbox } from '@novu/react';
+import { useRouter } from 'next/navigation';
+
+export const Inbox = React.memo((props: InboxProps) => {
+  const router = useRouter();
+
+  return <RInbox routerPush={router.push} {...props} />;
+});

packages/nextjs/src/components/index.ts

@@ -0,0 +1,38 @@
+'use client';
+
+import {
+  BaseProps,
+  Bell,
+  BellProps,
+  BellRenderer,
+  DefaultInboxProps,
+  DefaultProps,
+  Inbox,
+  InboxContent,
+  InboxContentProps,
+  InboxProps,
+  Notification,
+  NotificationProps,
+  Notifications,
+  NotificationsRenderer,
+  Preferences,
+  WithChildrenProps,
+} from '@novu/react';
+
+export * from './Inbox';
+
+export { Bell, InboxContent, Notifications, Preferences };
+
+export type {
+  BaseProps,
+  BellProps,
+  BellRenderer,
+  DefaultInboxProps,
+  DefaultProps,
+  InboxContentProps,
+  InboxProps,
+  NotificationProps,
+  NotificationsRenderer,
+  WithChildrenProps,
+  Notification,
+};

packages/nextjs/src/hooks/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export * from '@novu/react/hooks';

packages/nextjs/src/index.ts

@@ -0,0 +1,4 @@
+'use client';
+
+export * from './components';
+export * from './hooks';

packages/nextjs/src/themes/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export * from '@novu/react/themes';

packages/nextjs/themes/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/themes/index.js",
+  "module": "../dist/themes/index.mjs",
+  "types": "../dist/themes/index.d.ts"
+}

packages/nextjs/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "ES6",
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Bundler",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "exclude": ["src/**/*.test.*", "src/*.test.*", "node_modules", "**/node_modules/*"]
+}