تُعتني Next.js بالعديد من التحسينات في تطبيق React لكي لا تضطر إلى
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 من خلال توفير سلسلة أدوات كاملة لبناء التطبيق باستخدام أمر واحد.
على الرغم من أنّ هناك بعض التحسينات التلقائية المضمّنة في أداة 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 جديد.
- انقر على Remix to Edit (إنشاء ريمكس لتعديله) ليصبح المشروع قابلاً للتعديل.
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة
.
يُرجى ملاحظة أنّه تم إنشاء دليل pages/ يتضمّن ملفًا واحدًا: index.jsx. يتّبع Next.js
نهج توجيه نظام الملفات، حيث يتم عرض كل صفحة ضمن هذا الدليل كمسار
منفصل. سيؤدي إنشاء ملف جديد في هذا الدليل، مثل about.js، إلى إنشاء مسار جديد تلقائيًا (/about).
يمكن أيضًا إنشاء المكوّنات واستخدامها مثل أي تطبيق React آخر. سبق أن تم إنشاء دليل components/
يتضمّن مكوّنًا واحدًا، وهو nav.js، سبق أن
تم استيراده في index.js. بشكلٍ تلقائي، لا يتم جلب كل عملية استيراد مستخدَمة في Next.js إلا عند تحميل
هذه الصفحة، ما يقدّم مزايا تقسيم الرمز البرمجي المبرمَج.
بالإضافة إلى ذلك، يتم عرض كل عملية تحميل أولية للصفحة من جهة الخادم في Next.js. إذا فتحت لوحة "الشبكة" في "أدوات مطوّري البرامج"، يمكنك الاطّلاع على الطلب الأوّلي للمستند الذي يعرض صفحة تم عرضها بالكامل على الخادم.
هذه ليست سوى بعض الميزات العديدة التي يوفّرها Next.js تلقائيًا. ويمكن تخصيص العديد من هذه الإعدادات وتعديلها لحالات استخدام مختلفة.
ما هي الخطوات التالية؟
يُقصد بالتورية أن 😲
سيتناول كل دليل آخر في هذه المجموعة ميزة معيّنة في Next.js بالتفصيل:
- توجيه الجلب المسبق لتسريع عمليات التنقل في الصفحات
- عرض صفحات مختلطة وصفحات AMP فقط لتحميلها بشكل أسرع من محرّكات البحث
- مكوّنات تقسيم الرموز باستخدام عمليات الاستيراد الديناميكية لتقليل مساحة JavaScript