fix(nextjs): Fix router compat when use client is used (#7951)

Author: desiprisg

packages/nextjs/src/pages-router/Inbox.tsx

@@ -1,11 +1,22 @@
 'use client';
 
 import { InboxProps, Inbox as RInbox } from '@novu/react';
-import { useRouter } from 'next/router';
+import { useRouter as useAppRouter } from 'next/navigation';
+import { useRouter } from 'next/compat/router';
+
+function AppRouterInbox(props: InboxProps) {
+  const router = useAppRouter();
+
+  return <RInbox routerPush={router.push} {...props} />;
+}
 
 export function Inbox(props: InboxProps) {
   const router = useRouter();
 
+  if (!router) {
+    return <AppRouterInbox {...props} />;
+  }
+
   return <RInbox routerPush={router.push} {...props} />;
 }
 

playground/nextjs/src/app/inbox-client/page.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { novuConfig } from '@/utils/config';
+import { Inbox, Notifications, Preferences } from '@novu/nextjs';
+
+export default function InboxPage() {
+  return (
+    <>
+      <h1>Hello from Inbox page</h1>
+      <div className="flex flex-col gap-4">
+        <h1>App Router</h1>
+        <Inbox {...novuConfig}>
+          <h2>My custom Inbox</h2>
+          <Preferences />
+          <Notifications />
+        </Inbox>
+        <Inbox {...novuConfig} />
+      </div>
+    </>
+  );
+}