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

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

Houssein Djirdeh

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

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

ما الذي ستتعلمه؟

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

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

How is Next.js different from React?

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

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

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

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

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

الإعداد

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

npx create-next-app new-app

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

cd new-app
npm run dev

يعرض الرمز المضمّن التالي بنية الدليل لتطبيق Next.js جديد.

  • انقر على Remix to Edit (إنشاء ريمكس لتعديل المحتوى) ليصبح المشروع قابلاً للتعديل.
  • لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة ملء الشاشة.

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

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

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

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

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

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

قصدنا استخدام هذا التعبير 😛

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