بناء الوضع الداكن (Dark Mode) في Next.js بدون وميض

يبدو الوضع الداكن بسيطاً، ولكن تظهر المشكلة عند رؤية الوميض.

عندما يقوم المستخدم بتحميل صفحتك، يرسل الخادم (server) المظهر الافتراضي. يرى المستخدم شاشة بيضاء لجزء من الثانية قبل تفعيل المظهر الداكن. هذه تجربة مستخدم سيئة.

تكمن المشكلة في أن الخادم لا يمكنه قراءة localStorage. لا يعرف الخادم المظهر إلا بعد أن يقوم المتصفح بتشغيل JavaScript الخاص بك.

إليك كيفية إصلاح ذلك.

الحل: النص البرمجي المضمن (The Inline Script)

يجب عليك تطبيق المظهر قبل بدء تشغيل React. ضع نصاً برمجياً (script) صغيراً في وسم <head>. يقرأ هذا النص التفضيلات ويضيف فئة (class) الـ dark فوراً.

استخدم هذه الخطوات:

  • أضف script في <head> الخاص بـ RootLayout للتحقق من localStorage.
  • استخدم suppressHydrationWarning في وسم <html>. هذا يمنع React من إظهار تحذيرات بشأن عدم تطابق المظهر.
  • استخدم ThemeProvider لإدارة الحالة (state) والمزامنة مع localStorage.
  • استخدم متغيرات CSS مع Tailwind لضمان انتقالات سلسة للألوان.

لماذا ينجح هذا: يعمل النص البرمجي قبل عرض الصفحة (render)، مما يمنع القفزة البصرية.

التعامل مع الصور

غالباً ما تحتاج الصور إلى إصدارات مختلفة للوضع الفاتح والداكن. لديك خياران:

  • طريقة CSS: استخدم display: none و display: block لتبديل الصور بناءً على فئة .dark. هذه هي الطريقة الأسرع.
  • طريقة العميل (Client Method): استخدم مكوناً (component) يتحقق من المظهر ويختار مصدر الصورة المناسب.

نصيحة احترافية للمحتوى الذي يتم معالجته في جانب الخادم (Server-Side)

إذا كنت بحاجة إلى أن يعرف الخادم المظهر من أجل الرسوم البيانية أو المحتوى الثقيل، فاستخدم ملفات تعريف الارتباط (cookies) بدلاً من localStorage.

  • قم بتخزين المظهر في cookie.
  • استخدم Next.js middleware لقراءة تلك الـ cookie.
  • مرر المظهر إلى الـ layout الخاص بك عبر الـ headers.

يتيح ذلك للخادم إرسال HTML الصحيح منذ البداية.

ملخص لنظام خالٍ من الوميض: • استخدم script مضمناً في الـ <head> • استخدم suppressHydrationWarning • أدر الحالة باستخدام Context Provider • استمع لتغييرات تفضيلات النظام

هذا النهج يعمل مع تطبيقات الإنتاج (production apps). فهو يضمن التبديل الفوري وعدم وجود أي وميض.

المصدر: https://dev.to/aon_infotech_3a1b6ff525fc/building-a-dark-mode-system-in-nextjs-app-router-without-layout-flash-5gf9