بناء نظام إشعارات متكامل مع Novu و Next.js 15

npm install @novu/framework @novu/react @novu/api

# جانب الخادم فقط — لا تكشفه للمتصفح
NOVU_SECRET_KEY=novu_secret_your_key_here
 
# آمن للكشف للمتصفح
NEXT_PUBLIC_NOVU_APP_ID=app_your_identifier_here
 
# رابط تطبيقك العام
NEXT_PUBLIC_APP_URL=http://localhost:3000

// lib/novu/workflows.ts
import { workflow } from '@novu/framework';
import { z } from 'zod';
 
export const taskAssignedWorkflow = workflow(
  'task-assigned',
  async ({ step, payload }) => {
    // إشعار فوري داخل التطبيق
    await step.inApp('in-app-alert', async () => ({
      subject: `مهمة جديدة: ${payload.taskTitle}`,
      body: `قام ${payload.assignerName} بتعيين مهمة لك بأولوية ${payload.priority}.`,
    }));
 
    // انتظر 10 دقائق ثم أرسل بريداً إلكترونياً
    await step.delay('wait-before-email', async () => ({
      amount: 10,
      unit: 'minutes',
    }));
 
    await step.email('email-fallback', async () => ({
      subject: `إجراء مطلوب: ${payload.taskTitle}`,
      body: `
        <h2>لديك مهمة جديدة</h2>
        <p>قام <strong>${payload.assignerName}</strong> بتعيينك على:</p>
        <h3>${payload.taskTitle}</h3>
        <p>الأولوية: ${payload.priority}</p>
        <a href="${payload.taskUrl}" style="color:#7C3AED">عرض المهمة</a>
      `,
    }));
  },
  {
    payloadSchema: z.object({
      taskTitle: z.string(),
      taskDescription: z.string().optional().default(''),
      assignerName: z.string(),
      priority: z.enum(['low', 'medium', 'high']),
      taskUrl: z.string().url(),
    }),
  }
);

// app/api/novu/route.ts
import { serve } from '@novu/framework/next';
import { taskAssignedWorkflow } from '@/lib/novu/workflows';
 
export const { GET, POST, PUT } = serve({
  workflows: [taskAssignedWorkflow],
});

# استخدم ngrok لكشف الخادم المحلي
ngrok http 3000
 
# ثم زامن مع رابط النفق
npx novu@latest sync --bridge-url https://your-ngrok-url.ngrok.io/api/novu

// components/NotificationInbox.tsx
'use client';
 
import { NovuProvider, Inbox } from '@novu/react';
 
interface NotificationInboxProps {
  subscriberId: string;
}
 
export function NotificationInbox({ subscriberId }: NotificationInboxProps) {
  return (
    <NovuProvider
      applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_ID!}
      subscriberId={subscriberId}
    >
      <Inbox
        appearance={{
          variables: {
            colorPrimary: '#7C3AED',
            colorBackground: '#1F2937',
            colorForeground: '#F9FAFB',
          },
        }}
      />
    </NovuProvider>
  );
}

// components/Navbar.tsx
import { auth } from '@/lib/auth';
import { NotificationInbox } from './NotificationInbox';
 
export async function Navbar() {
  const session = await auth();
 
  return (
    <nav className="flex items-center justify-between px-6 py-4 border-b">
      <span className="text-xl font-bold">TaskFlow</span>
      <div className="flex items-center gap-4">
        {session?.user && (
          <NotificationInbox subscriberId={session.user.id} />
        )}
      </div>
    </nav>
  );
}

// lib/novu/client.ts
import { Novu } from '@novu/api';
 
export const novu = new Novu({ secretKey: process.env.NOVU_SECRET_KEY! });

// app/actions/tasks.ts
'use server';
 
import { novu } from '@/lib/novu/client';
import { auth } from '@/lib/auth';
import { db } from '@/lib/db';
import { revalidatePath } from 'next/cache';
 
export async function assignTask(taskId: string, assigneeId: string) {
  const session = await auth();
  if (!session?.user) throw new Error('Unauthorized');
 
  const task = await db.task.update({
    where: { id: taskId },
    data: { assigneeId },
    include: { assignee: true },
  });
 
  // لا ترسل إشعاراً إذا عيّن المستخدم المهمة لنفسه
  if (assigneeId !== session.user.id) {
    await novu.trigger({
      name: 'task-assigned',
      to: {
        subscriberId: assigneeId,
        email: task.assignee.email,
        firstName: task.assignee.name ?? undefined,
      },
      payload: {
        taskTitle: task.title,
        taskDescription: task.description ?? '',
        assignerName: session.user.name ?? 'أحد زملائك',
        priority: task.priority,
        taskUrl: `${process.env.NEXT_PUBLIC_APP_URL}/tasks/${taskId}`,
      },
    });
  }
 
  revalidatePath('/tasks');
  return task;
}

// components/CustomNotificationPanel.tsx
'use client';
 
import { useNotifications } from '@novu/react';
import { BellIcon } from 'lucide-react';
import { useState } from 'react';
 
export function CustomNotificationPanel() {
  const [open, setOpen] = useState(false);
  const { notifications, unreadCount, markAllAsRead, markAsRead, isLoading } =
    useNotifications();
 
  return (
    <div className="relative">
      <button
        onClick={() => setOpen(!open)}
        className="relative p-2 rounded-full hover:bg-gray-100"
      >
        <BellIcon className="w-5 h-5" />
        {unreadCount > 0 && (
          <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
            {unreadCount}
          </span>
        )}
      </button>
 
      {open && (
        <div className="absolute left-0 mt-2 w-80 bg-white rounded-lg shadow-xl border z-50">
          <div className="flex justify-between items-center p-4 border-b">
            <span className="font-semibold">الإشعارات</span>
            <button onClick={markAllAsRead} className="text-sm text-purple-600">
              تعليم الكل كمقروء
            </button>
          </div>
 
          {isLoading ? (
            <div className="p-4 text-center text-gray-500">جارٍ التحميل...</div>
          ) : notifications.length === 0 ? (
            <div className="p-4 text-center text-gray-500">لا توجد إشعارات بعد</div>
          ) : (
            <ul className="max-h-96 overflow-y-auto">
              {notifications.map((n) => (
                <li
                  key={n.id}
                  onClick={() => markAsRead(n.id)}
                  className={`p-4 border-b cursor-pointer hover:bg-gray-50 ${
                    !n.isRead ? 'bg-purple-50' : ''
                  }`}
                >
                  <p className="font-medium text-sm">{n.subject}</p>
                  <p className="text-xs text-gray-500 mt-1">{n.body}</p>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </div>
  );
}

// components/NotificationSettings.tsx
'use client';
 
import { NovuProvider, Preferences } from '@novu/react';
 
export function NotificationSettings({ subscriberId }: { subscriberId: string }) {
  return (
    <NovuProvider
      applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_ID!}
      subscriberId={subscriberId}
    >
      <Preferences />
    </NovuProvider>
  );
}

# طرفية 1
npm run dev
 
# طرفية 2
npx novu@latest dev

// scripts/test-notification.ts
import { novu } from '../lib/novu/client';
 
async function main() {
  const result = await novu.trigger({
    name: 'task-assigned',
    to: {
      subscriberId: 'test-user-123',
      email: 'test@yourapp.com',
    },
    payload: {
      taskTitle: 'مراجعة الصفحة الرئيسية',
      taskDescription: 'تحقق من صياغة قسم البطل.',
      assignerName: 'سكريبت الاختبار',
      priority: 'medium',
      taskUrl: 'http://localhost:3000/tasks/test-001',
    },
  });
 
  console.log('تم الإطلاق:', result);
}
 
main().catch(console.error);

npx tsx scripts/test-notification.ts