مساعدة في مشروع Next.js

تجنب رفع المشاريع مع مجلد node_modules.

المشكلة ليست في Next.js نفسه بل بسبب انتقال الكود من السيرفر إلى المتصفح،  أي في مرحلة الـ Hydration.

ففي React كل شيء يحدث في المتصفح، بمعنى يحصل على ملف جافاكسريبت، ثم React تقوم ببناء الصفحة بأكملها، لذا منذ اللحظة الأولى، تعرف React حجم الشاشة ويمكنها تطبيق الأنماط المتجاوبة فورًا.

أما في Next.js فالأمر يتم من جهة الخادم أولاً، حيث يبني نسخة HTML أولية من الصفحة ويرسلها إلى المتصفح، المشكلة الخادم لا يعرف أي شيء عن المتصفح بعد، أي لا يعرف حجم الشاشة، أو عرض النافذة،  لذا، يقوم ببناء الصفحة بناءًا على افتراض معين وهي نسخة سطح المكتب.

بعد ذلك يستقبل المتصفح ملف الـ HTML ويعرضه فورًا وذلك سبب كون Next.js سريع في العرض الأولي، ثم يبدأ المتصفح في تحميل ملفات جافاسكريبت.

ثم يلي ذلك مرحلة الـ Hydration والتي تقوم بها React بالاستحواذ على الـ HTML الذي أرسله الخادم وحقن جافاسكريبت به ليصبح تفاعلي، أي تستوعب React أنها تعمل الآن في المتصفح، وتحصل على حجم الشاشة الحقيقي، وتحديث الواجهة لتتطابق مع ذلك الحجم.

وبسبب ما سبق تظهر مشكلة في بعض المكتبات مكتبات الـ Sliders, Carousels, أو الرسوم البيانية والتي تعتمد بشكل كبير على كائن window عند تهيئتها، ولو حاولت استيرادها وتشغيلها على الخادم، ستسبب مشاكل لأن كائن window غير موجود هناك.

ولديك مكتبات aos للتحريكات عند التمرير، و swiper للسلايدر تقوم بحقن الأنماط الخاصة بها في الصفحة عند تشغيلها على المتصفح، لكن الخادم يرسل صفحة HTML بدون تلك الأنماط، وعند تحميل وتشغيل ملفات جافاسكريبت في المتصفح، تبدأ تلك المكتبات بالعمل وتضيف الأنماط اللازمة، بالتالي الصفحة تبدو متجاوبة فجأة.

يجب أن تستورد ملفات CSS الخاصة بها مباشرة في ملف التنسيق الرئيسي للمشروع layout.tsx، لتضمين الأنماط في ملف CSS الرئيسي الذي يتم تحميله مع الصفحة من البداية، ويصبح التطبيق متجاوب فورًا عند عرض الصفحة.

import 'aos/dist/aos.css';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';