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

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

Houssein Djirdeh

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

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

ماذا ستتعلّم؟

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

هناك العديد من التحسينات التي يمكن إضافتها إلى مواقع 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. By default, every import used in Next.js is only fetched when that page is loaded, providing the benefits of automated code-splitting.

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

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

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

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

Pun intended 😛

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