كيفية إضافة شاشات Skeleton في Next.js

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

اكتشف بالضبط ما هي الشاشة الهيكلية ، ولماذا قد ترغب في استخدامها في تطبيقك ، وكيفية تنفيذها في Next.js.

ما هي شاشة الهيكل العظمي؟

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

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

لماذا تستخدم شاشة هيكل عظمي؟

هناك عدة أسباب وراء رغبتك في استخدام شاشة هيكلية في تطبيق Next.js.

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

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

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

كيفية تنفيذ شاشة هيكل عظمي في Next.js

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

الطريقة الأولى: استخدام الميزات المضمنة

في Next.js ، يمكنك استخدام ملفات خطاطيف رد فعل مختلفة وشروط بسيطة لإظهار شاشات الهيكل العظمي. يمكنك استخدام ال && دعامة لتقديم شاشات هيكلية بشكل مشروط.

يستورد {useState ، useEffect} من 'تتفاعل'؛
وظيفةMyComponent() {
مقدار ثابت [isLoading، setIsLoading] = useState (حقيقي);
useEffect (() => {
 setTimeout (() => setIsLoading (خطأ شنيع), 1000);
 }, []);
يعود (
<شعبة>
 {تحميل && (
<شعبة>
 تحميل...
</div>
 )}
 {! isLoading && (
<شعبة>
 المحتوى الخاص بي.
</div>
 )}
</div>
 );
}
يصدّرتقصير MyComponent؛

يستخدم الرمز أعلاه useState ربط لتتبع ما إذا كان يتم تحميل البيانات (تحميل). يستخدم useEffect ربط لمحاكاة تحميل البيانات بشكل غير متزامن. أخيرًا ، يستخدم ملحق && عامل التشغيل لعرض الشاشة الهيكلية أو محتوى المكون بشكل مشروط.

هذه الطريقة ليست مثالية لأنها تتطلب ضبط ملف تحميل حالة ومحاكاة تحميل البيانات. ومع ذلك ، فهي طريقة بسيطة لتنفيذ شاشة هيكلية في Next.js.

الطريقة الثانية: استخدام مكتبة مثل "React-Loading-Skeleton"

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

لاستخدام رد فعل التحميل-الهيكل العظمي ، تحتاج إلى تثبيته باستخدام npm.

npm أنا أتفاعل-تحميل-هيكل عظمي

بمجرد تثبيته ، يمكنك استيراده إلى تطبيق Next.js واستخدامه على النحو التالي:

يستورد تتفاعل من 'تتفاعل'؛
يستورد هيكل عظمي من "رد فعل-تحميل-هيكل عظمي" ؛
يستورد 'رد فعل-تحميل-هيكل عظمى / dist / skeleton.css'
مقدار ثابت التطبيق = () => {
يعود (
<شعبة>
<هيكل عظمي />
<h3>الشاشة الثانية</h3>
<ارتفاع الهيكل العظمي = {40} />
</div>
 );
};
يصدّرتقصير برنامج؛

يستورد الكود أعلاه ملف هيكل عظمي مكون من مكتبة رد فعل-تحميل-هيكل عظمي. ثم يستخدمها لإنشاء شاشتين هيكليتين. يستخدم ارتفاع دعامة لضبط ارتفاع شاشة الهيكل العظمي. الآن انت تستطيع استخدام العرض الشرطي لتقديم المكون فقط عندما تكون البيانات موجودة.

الطريقة الثالثة: استخدام واجهة المستخدم المادية

إذا كنت تستخدم Material UI في تطبيق Next.js ، فيمكنك استخدام مكون من @ mui / المواد مكتبة. ال يحتوي المكون من Material UI على بعض الدعائم التي يمكنك استخدامها لتخصيص شاشة الهيكل العظمي.

لاستخدام ال مكون من Material UI ، تحتاج أولاً إلى تثبيته باستخدام npm:

تثبيت npm mui/material

بمجرد تثبيته ، يمكنك استيراده إلى تطبيق Next.js واستخدامه على النحو التالي:

يستورد تتفاعل من 'تتفاعل'؛
يستورد هيكل عظمي من "@ mui / المواد / الهيكل العظمي" ؛
مقدار ثابت التطبيق = () => {
يعود (
<شعبة>
<متغير الهيكل العظمي ="مستقيم" العرض = {210} الارتفاع = {118} />
<h3>الشاشة الثانية</h3>
<متغير الهيكل العظمي ="نص" />
</div>
 );
};
يصدّرتقصير برنامج؛

يستورد الكود أعلاه ملف هيكل عظمي مكون من @ material-ui / lab مكتبة. ثم يقوم بإنشاء شاشتين هيكليتين. ال البديل يحدد الدعامة نوع شاشة الهيكل العظمي. ال عرض و ارتفاع تحدد الدعائم أبعاد شاشة الهيكل العظمي.

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

يستورد تتفاعل من 'تتفاعل'؛
يستورد هيكل عظمي من "@ mui / المواد / الهيكل العظمي" ؛
مقدار ثابت التطبيق = () => {
يعود (
<شعبة>
<متغير الهيكل العظمي ="مستقيم" العرض = {210} الارتفاع = {118} />
<h3>الشاشة الثانية</h3>
<متغير الهيكل العظمي ="نص" تحريك ="موجة" />
</div>
 );
};
يصدّرتقصير برنامج؛

عن طريق إضافة تحريك دعم ل المكون ، يمكنك دمج الحركة المرئية في واجهة المستخدم الخاصة بك. ال موجة تضيف القيمة رسمًا متحركًا يلوح بالحيوية إلى شاشة الهيكل العظمي. يمكنك الآن استخدام العرض الشرطي لإظهار المحتوى بعد شاشة الهيكل العظمي.

تحسين تجربة المستخدم مع شاشات الهيكل العظمي

يمكن أن تكون الشاشات الهيكلية طريقة رائعة لتحسين تجربة المستخدم لتطبيق Next.js. يمكنهم زيادة السرعة المتصورة وتقليل الرسائل غير المرغوب فيها وتقديم تجربة أفضل عندما تنتقل البيانات عبر اتصال بطيء أو غير مستقر.

مهما كانت الطريقة التي تختارها لإضافة شاشات هيكلية ، فهي طريقة رائعة لتحسين تجربة المستخدم في تطبيق Next.js.