ماهو الــ Next.js و مميزاته, و ماهي المشاكل اللي يحلها لنا ⬇️
🚨 - المعذرة كثير من المصطلحات اللي بذكرها ماعرف ترجمتها بالعربي لكنها مصطلحات شائعة في المجال
- الـ Next.js هوا عبارة عن Full Stack React Framework مبني على الـ Node.js يتيح لنا بناء مواقع server-side rendering و static site generation.
- الـ React هو Client-side بمعنى لمن اليوزر يعمل request السيرفر بيرجعلنا صفحة HTML فاضية مع ملفات js ثم المتصفح يقوم بتحميل جميع ملفات الجافاسكريبت و يبدأ ينفذ اكواد الرياكت و بعد هذا كله تظهر لك الصفحة.
احد سلبيات الـ Client-side rendering هي :
- بطئ في تحميل الصفحة عند زيارتها لأول مرة.
- صعوبة ارشفة الصفحات في محركات البحث.
- بطئ في تحميل الصفحة عند زيارتها لأول مرة.
- صعوبة ارشفة الصفحات في محركات البحث.
اذا مشروعك يتطلب سرعة في التحميل و مهم ظهوره في محركات البحث الحل انك تستخدم SSR او SSG .
لكن طريقة تفعيلهم في الرياكت معقدة و تاخذ وقت. لحسن الحظ مع الـ Next اصبح بأمكاننا بناء مواقع server-side and static sites بخطوات بسيطة جدا !
- الـ Server-side rendering هوا انك تعمل request و يتم تجهيز بيانات الصفحة عن طريق السيرفر ثم يتم ارسالها للمتصفح.
- الـ Static site generation هي صفحات ثابتة تكون مبنية عند عمل build للمشروع .. الصفحات الثابتة ميزتها ان سرعتها تكون عالية جدا .. لكن لو مشروعك يتعامل مع قاعدة بيانات تتحدث كل فترة فالموقع لن يتحدث لان الصفحات ثابتة و مبنية ف رح تضطر انك تعيد بناء الموقع كامل.
- الـ incremental static regeneration هوا شبيه ل SSG لكن يتيح لك تحديث بيانات الصفحة بدون إعادة بنائها بالكامل مكسره الدنيا في الفترة الاخيرة 🔥.
- سهولة التعامل مع الراوتر File-system router.. يوجد مجلد خاص اسمه page كل اللي عليك تسويه هو انشاء ملف باسم الصفحة و تلقائيا بيعملك الـ route بدون اي configuration او مكتبات خارجية.
- تحسين الموقع الخاص بك ليظهر في الصفحات الأولى في محركات البحث (SEO friendly) 🕷️.
- الـ Image optimization .. الصور غالبا تكون حجمها كبير و تسبب بطئ في تحميل الصفحة لكن يوجد لدى الـ Next Image component خاص لتقليص حجم الصورة بنسبة كبيرة بتغيير امتدادها الى webp و يتم عمل Lazyloading لها حتى ماتأثر على تحميل الصفحة.
- الـ API Route.. الـ Next.js يتيحلك بناء restful api الخاص فيك بدلا من بناء express server
و طبعا يوجد مميزات كثيرة جدا لهذا ال Framework صعب اغطيها كل في ثريد واحد فقط تقدر تشوفها في موقعهم nextjs.org
جاري تحميل الاقتراحات...