طريقة إضافة خط التحميل لموقع Nextjs

Nextjs ولا كايتعتابر أفضل framework لبناء المواقع الإلكترونية ب React. لأنه كايمكنك من أنك تجمع ل frontend و ل backend في مكان واحد.

المواقع الإلكترونية اللي مقادة ب Nextjs كاتبان بحال إلى Single page application , واخا المستخدم يتنقل بين الصفحات , Nextjs كايقوم بكل شيئ في الخلفية بدون مايظهر للمستخدم أن الصفحة كاتحمل.

هادشي كايساعد الموقع باش إخدم بسلاسة و خفة. لكن المشكل هو أنه أثناء التحميل ديال الصفحات, المستخدم مكايعرفش واش الصفحة كاتحمل, و خصوصا إلى كان الإتصال بالأنترنيت ضعيف و الصفحة خدات وقت.

مثال على المشكل :

باش نحلو هاد المشكل غانضيفو للموقع واحد الخط كايكون فوق الصفحة كايبين للمستخدم ان عملية التحميل سارية.

العديد من المواقع الإلكترونية كايستعملو هاد الطريقة , مثال : youtube.

إضافة خط التحميل لموقع Nextjs :

باش نحققو هادشي غانحتاجو Package سميتو nprogress. غانضيفوه للمشروع ديالنا .

npm i nprogress

باش نراقبو التحميل ديال الصفحات فوقاش بدا و فوقاش ينتهي, غانستعملو وحد ل Module كايعطيهنا Nextjs سميتو Router. هاد Router كايعطينا Events اللي من خلالهم إمكلينا نعرفو فوقاش بدا التحميل ديال الصفحة و فوقاش نتهى.

• routeChangeStart : هاد ل Event كايتفعل ملي المستخدم كايطلب صفحة أخرى. بمعنى أخر كاتبدا عملية تحميل صفحة جديدة.

• routeChangeComplete : هاد ل Event كايتفعل ملي التحميل ديال الصفحة كايتم بنجاح.

• routeChangeError : هاد ل Event كايتفعل ملي كايوقع شي خطئ اثناء تحميل الصفحة. مثلا إنقطاع الإتصال ...

بالنسبة ل nprogress غانخدمو ب 2 Methods كاتعطيهوم لينا :

• start : كانستخدموها باش نضيفو خط التحميل للصفحة.

• done : كانستخدموها باش نحيدو خط التحميل من الصفحة.

ل code غانوضعوه في ملف app.js_ لأنه كايشكل غلاف لجميع الصفحات. أي code درتيه فهاد الملف غايخدم في جميع الصفحات ديال الموقع.

import Router from 'next/router';
import nprogress from 'nprogress';
import "nprogress/nprogress.css"; // nprogress الخاص ب Style  هادا

Router.events.on('routeChangeStart', () => nprogress.start());
Router.events.on('routeChangeComplete', () => nprogress.done());
Router.events.on('routeChangeError', () => nprogress.done());

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}
export default MyApp;

كيف ما كاتشوفو فال code, ملي كايتفعل ل Event ديال routeChangeStart كانضيفو خط التحميل بإستخدام ()nprogress.start. و ملي كاينتاهي التحميل أو توقف بسبب خطئ ما , يعني ملي كايتفل routeChangeComplete أو routeChangeError , كانحيدو خط التحميل بإستخدام ()nprogress.done.