Magdy Atef Zahran

إزاي تبني نظام Notifications عملي في موقعك في Next.js بدون تعقيد؟

لو بتشتغل على مشروع في Next.js وعاوز تضيف نظام إشعارات (Notifications) للمستخدمين زي نجاح عملية او خطأ او إشعارات Real-Time فالموضوع أسهل مما تتخيل يا صديقي.. هشرحلك ازاي تعمل كدا دلوقتي ان شاء الله..

في الأول: يعني إيه Notifications أصلاً؟

🔹 هي رسائل بتنبه المستخدم بحالة معينة داخل الموقع سواء كانت رسائل نجاح (Success) او تحذير (Warning) أو خطأ (Error).
🔹 أو عادي ممكن تكون إشعارات لحظية (Live) لو التطبيق بيحتاج Real-Time Updates.

طيب إزاي نطبقها في Next.js؟

هنشرح دلوقتي خطوة بخطوة إزاي تبني نظام إشعارات عملي في مشروعك. 💡

1️⃣ هنستخدم مكتبة Zustand لإدارة الإشعارات

📂 store/notifications.js

import { create } from “zustand”; export const useNotificationStore = create((set) => ({ notifications: [], addNotification: (message, type = “info”) => set((state) => ({ notifications: […state.notifications, { message, type, id: Date.now() }], })), removeNotification: (id) => set((state) => ({ notifications: state.notifications.filter((notif) => notif.id !== id), })), }));

ـ عرفنا Store عشان اضافة ومسح الإشعارات.
ـ كل إشعار هيكون له رسالة نوع و ID.

2️⃣ بعد كدا هنعمل كومبوننت لعرض الإشعارات

📂 components/Notifications.js

import { useNotificationStore } from “@/store/notifications”; export default function Notifications() { const { notifications, removeNotification } = useNotificationStore(); return ( <div> {notifications.map(({ id, message, type }) => ( <div> {message} <button> removeNotification(id)}>X</button> </div> ))} </div> ); }

ـ أي إشعار جديد هيظهر في الشاشة وهيختفي لما المستخدم يقفله.
ـ كل إشعار بيكون ليه ستايل مختلف حسب نوعه (نجاح – خطأ – تحذير).

3️⃣ هنستخدم الإشعارات في أي مكان في الموقع

📂 pages/index.js

import { useNotificationStore } from “@/store/notifications”; import Notifications from “@/components/Notifications”; export default function Home() { const { addNotification } = useNotificationStore(); return ( <div> <button> addNotification(“تمت العملية بنجاح!”, “success”)}> إضافة إشعار نجاح ✅ </button> <button> addNotification(“حدث خطأ ما!”, “error”)}> إضافة إشعار خطأ ❌ </button> </div> ); }

ـ بمجرد الضغط على الزرار هيظهر إشعار في الشاشة.
ـ ممكن تستدعي addNotification في أي مكان في التطبيق (زي API Calls، Form Submissions، إلخ).

4️⃣ (اختياري) إضافة إشعارات Real-Time باستخدام Pusher

لو عاوز إشعارات حية، استخدم Pusher أو WebSockets لتحديث الإشعارات للمستخدمين مباشرة. 🔄

(وانا شرحت تعمل كدا ازاي في مقال الـWebSockets ممكن ترجعله، هسيب لك الرابط بتاعه)
رابط المقال

وبكده بقى عندك نظام Notifications عملي تقدر تضيفه في موقعك في Next.js،, لو عندك أي استفسار، اكتب في الكومنتات..💛

Borma