خطأ JavaScript: Cannot read properties of null في Next.js عند جلب المدونات

مقدمة

يعد استخدام JavaScript مع إطار Next.js من الخيارات الشائعة لبناء تطبيقات الويب العصرية. إلا أن بعض المطورين قد يواجهون مشاكل أثناء جلب البيانات من واجهات برمجة التطبيقات، مثل الخطأ الذي قد يظهر تحت عنوان "Unhandled Runtime Error TypeError: Cannot read properties of null (reading ‘default’)". في هذا المقال، سنستعرض الأسباب وراء ظهور هذا الخطأ وكيفية تصحيحه عند جلب المدونات باستخدام useEffect.

ما هو الخطأ: Unhandled Runtime Error في Next.js؟

الخطأ "Unhandled Runtime Error TypeError: Cannot read properties of null (reading ‘default’)" هو واحد من المشاكل التي قد تواجه المطورين عند استخدام مكتبات JavaScript مثل React وNext.js. يحدث هذا الخطأ حينما يحاول التطبيق قراءة خاصية ما على كائن فارغ، مما يسبب في حدوث حالة غير معروفة في وقت التشغيل.

سبب الخطأ عند استخدام useEffect

عند استخدام الدالة useEffect لجلب البيانات، من المحتمل أن تكون البيانات غير متاحة في لحظة استدعاء الدالة. على سبيل المثال، إذا قمت بجلب المدونات من API مثل dev.to، قد تتلقى مصفوفة فارغة في البداية قبل أن يتم تحميل البيانات فعليًا. وبالتالي، فإن أي محاولة للوصول إلى خاصية من عنصر غير موجود (مثل عنصر له قيمة null) ستؤدي إلى حدوث الخطأ المذكور.

يتمثل أحد السيناريوهات الشائعة حيث يظهر هذا الخطأ عندما تكون البيانات المدخلة غير متاحة بعد. فمثلاً، إذا كان لديك حالتين: واحدة للبيانات المحملة وأخرى لعرض محتوى فارغ، فإن ذلك قد يؤدي إلى خطأ وقت التشغيل.

كيفية معالجة المشكلة

لحل مشكلة "Unhandled Runtime Error TypeError: Cannot read properties of null (reading ‘default’)" عند استخدام useEffect، يجب التحقق من وجود البيانات قبل محاولة الوصول إلى خصائصها. يمكن القيام بذلك عن طريق استخدام جملة شرطية لضمان أن البيانات غير فارغة.

if (!blogsData || blogsData.length === 0) {
    return <div>لا توجد مدونات للعرض.</div>;
}

هذا الشرط سيمنع التطبيق من محاولة الوصول إلى خاصيات كائنات غير موجودة، مما يقلل من فرص حدوث الخطأ.

تأكيد البيانات المحملة قبل العرض

عند العمل مع React، من المهم التأكد من الحالة التي يجد فيها المستخدم نفسه. قد يفضل بعض المطورين إضافة حالة تحميل، مما يسمح للمستخدم بمعرفة أن البيانات قيد التحميل.

if (blogsLoading) {
    return <div>جارٍ تحميل المدونات...</div>;
}

بهذه الطريقة، تتيح للمستخدمين وقتًا كافيًا للتحقق من الحالة بدلاً من رؤية خطأ غير معالج.

الخلاصة

إذا كنت تعمل مع JavaScript وNext.js وتواجه مشكلة "Unhandled Runtime Error TypeError: Cannot read properties of null (reading ‘default’) occurs on Next.js while fetching blogs using useEffect"، تذكر دائمًا ضرورة التحقق من البيانات قبل الوصول إليها. معالجة هذه المشكلة تتطلب القليل من الصبر والفهم كيف تتفاعل مكونات React مع البيانات.

استخدام واجهات برمجة التطبيقات يمكن أن يكون معقدًا، لذلك من الجيد دائمًا التأكد من البيانات ووجودها قبل محاولة استخدامها. إذا كنت تتبع الخطوات أعلاه، ستتمكن من تقليل حدوث هذه الأخطاء وتحسين تجربة المستخدم بشكل كبير.