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

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

حسين جردية

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

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

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

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

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

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

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

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

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

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

  • العرض على جهة الخادم
  • التقسيم التلقائي للرموز
  • الجلب المُسبَق للمسار
  • توجيه نظام الملفات
  • نمط CSS في JavaScript (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" (معاينة) في لوحة الشبكة أن Next.js يعرض ترميز HTML كاملاً مرئيًا عند طلب الصفحة.
توضح علامة التبويب "معاينة" في لوحة "الشبكة" أن موقع Next.js يعرض رمز HTML كاملاً مرئيًا عندما يتم طلب الصفحة.

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

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

بمعنى آخر ⬅

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