الأداء كافتراضي باستخدام Next.js

تُعتني Next.js بالعديد من التحسينات في تطبيق React لكي لا تضطر إلى

Houssein Djirdeh

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

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

ماذا ستتعلم؟

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

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

ما هي أوجه الاختلاف بين Next.js وReact؟

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

في مجموعة React، اتّبعنا أسلوب استخدام Create React App (CRA) لإدارة تطبيقات React بسرعة. تخفف CRA عناء إعداد تطبيق React من خلال توفير سلسلة أدوات إنشاء كاملة باستخدام أمر واحد.

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

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

  • العرض من جهة الخادم
  • التقسيم التلقائي للرموز البرمجية
  • الجلب المسبق للمسار
  • توجيه نظام الملفات
  • نمط CSS-in-JS (styled-jsx)

الإعداد

لإنشاء تطبيق Next.js جديد، شغّل الأمر التالي:

npx create-next-app new-app

بعد ذلك، انتقل إلى الدليل وابدأ في تشغيل خادم التطوير:

cd new-app
npm run dev

يوضح التضمين التالي بنية الدليل الخاصة بتطبيق Next.js الجديد.

  • انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.
  • لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة ملء الشاشة.

يُرجى العِلم أنّه تم إنشاء دليل pages/ يحتوي على ملف واحد: index.jsx. يتبع Next.js منهج توجيه نظام الملفات، حيث يتم تقديم كل صفحة داخل هذا الدليل كمسار منفصل. سيؤدي إنشاء ملف جديد في هذا الدليل، مثل about.js، إلى إنشاء مسار جديد تلقائيًا (/about).

يمكن أيضًا إنشاء المكوّنات واستخدامها مثل أي تطبيق React آخر. تم إنشاء دليل components/ مسبقًا باستخدام مكوّن واحد، nav.js، تم استيراده من قبل في index.js. بشكل تلقائي، يتم استرجاع كل عملية استيراد مستخدَمة في Next.js عند تحميل تلك الصفحة فقط، ما يوفّر مزايا التقسيم الآلي للرموز البرمجية.

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

توضح علامة التبويب "Preview" (معاينة) في لوحة Network أن Next.js يعرض رمز HTML كاملاً مرئيًا عند طلب صفحة.
تعرِض علامة التبويب "معاينة" في لوحة "الشبكة" أنّ Next.js يعرض رمز HTML كاملاً مرئيًا عند طلب صفحة.

هذه ليست سوى عدد قليل من الميزات العديدة التي يوفرها Next.js تلقائيًا. فالعديد منها قابلة للتخصيص ويمكن تعديلها لحالات الاستخدام المختلفة.

ما هي الخطوات التالية؟

يُقصد بالتورية أن #

سيستكشف كل دليل آخر في هذه المجموعة إحدى ميزات Next.js المحددة بالتفصيل: