Next.js 9.1.7

تم إصدار Next.js 9 منذ ستة (6) أشهر، ثم Next.js 9.1 منذ ثلاثة (3) أشهر.

أضافت هاتان الإصدارتان ميزات جديدة قوية جدًا لـ Next.js، دون زيادة حجم وقت التشغيل الأساسي للعميل.

منذ ذلك الحين، ركزنا بشدة على تحسين الإطار ككل: 9.1.1, 9.1.2, 9.1.3, 9.1.4, 9.1.5, 9.1.6, و 9.1.7.

دعونا نتعمق في التحسينات التي قدمتها هذه الإصدارات!

• حجم JavaScript أصغر بنسبة 3% - 8%+ على جانب العميل: قمنا بتحسين إخراج التطبيق أكثر، مما قلل 7.5 كيلوبايت من تطبيقات "Hello World". التطبيقات الأكثر تعقيدًا ستظهر توفيرًا يصل إلى 8% أو أكثر.
• واجهة سطر أوامر معاد تصميمها للإنتاج: يعرض إخراج بناء الإنتاج الآن أحجام الملفات المضغوطة (gzipped) بتنسيق أسهل للفهم.
• حشوات مضمنة جديدة: fetch() و URL و Object.assign: يمكن للتطبيقات الاستفادة من واجهة برمجة التطبيقات fetch() و URL و Object.assign في المتصفحات القديمة دون مشاكل توافق.
• تحميل الصفحات الأمثل: FCP و TTI أفضل: تعاونا بشكل وثيق مع فريق Google Chrome لتحقيق أقصى أداء لتحميل الصفحات. هذا يؤدي إلى تجربة مستخدم نهائية أفضل بكثير.
• دعم أحدث ميزات JavaScript: نحن ملتزمون بضمان إمكانية استخدام أحدث ميزات JavaScript، بما في ذلك السلسلة الاختيارية (Optional Chaining), الدمج الصفري (Nullish Coalescing), وميزات ES2020 المستقرة الأخرى.
• دعم النشر بدون تكوين لتطبيقات next export: يمكن الآن نشر التطبيقات التي تعمل بـ next export على Vercel بدون أي تكوين.
• توافق واختيار وضع React الصارم: أصبح وقت تشغيل Next.js كاملًا متوافقًا مع الوضع الصارم (Strict Mode) في React. أضفنا أيضًا خيار تكوين لتمكين هذا الوضع لتطبيقك بالكامل.
• اختبار آلي ضد إصدارات React الليلية: يتم اختبار Next.js تلقائيًا ضد قناة next لـ React، مما يضمن التوافق مع الإصدارات المستقبلية.

كل هذه المزايا غير متعارضة مع الإصدارات السابقة ومتوافقة معها بالكامل. كل ما تحتاجه للتحديث هو تشغيل:

npm i next@latest react@latest react-dom@latest

حجم JavaScript أصغر بنسبة 3% - 8%+ على جانب العميل

بالتعاون مع فريق Google Chrome، ستستفيد جميع تطبيقات Next.js من تخفيض حجم 7.5 كيلوبايت أو أكثر.

يجب أن تشاهد التطبيقات الأساسية انخفاضًا في حجم التطبيق بنسبة 3-4%، بينما قد تشاهد التطبيقات الأكثر تقدمًا انخفاضًا يصل إلى 6-8% (أو أكثر)!

هذه التوفيرات تعزى جزئيًا إلى استبدال حزمة url الخاصة بجانب العميل بواحدة مبنية على واجهة URL API.

تم تحقيق المزيد من تقليل الحجم من خلال توفير حشوات مضمنة صغيرة للحزم المستخدمة بكثرة. يمكنك قراءة المزيد عن هذه الحشوات هنا.

أخيرًا، قمنا بتحسين إخراج JSX مما سيقدم توفيرًا يتناسب طرديًا مع كمية JSX في تطبيقك.

واجهة سطر أوامر معاد تصميمها للإنتاج

تم إعادة تصميم إخراج بناء الإنتاج لواجهة سطر الأوامر (CLI) ليكون أكثر وضوحًا. نظرًا لأن Next.js هو إطار عمل هجين للتطبيقات، فقد يكون لكل صفحة خصائص مختلفة.

يصنف الإخراج الجديد كل صفحة على النحو التالي:

• العرض من جانب الخادم (Server): يتم عرض الصفحة على جانب الخادم أثناء التشغيل، مما يعني أنها تستخدم getInitialProps أو getServerProps (اقتراح)
• تحسين ثابت تلقائيًا (Static): تم عرض الصفحة كـ HTML ثابت في وقت البناء، وسيتم تقديمها كملف ثابت (لا تستخدم أي خصائص أولية)
• توليد ثابت باستخدام بيانات محسوبة (SSG): تم إنشاء الصفحة كـ HTML/JSON ثابت في وقت البناء، وسيتم تقديمها كملفات ثابتة (تستخدم getStaticProps (اقتراح))

علاوة على ذلك، يعرض الإخراج الجديد حجم كل صفحة مضغوطة (Gzipped) - هذه الأحجام تستثني الملفات المشتركة بين جميع الصفحات (المعروضة بشكل منفصل).

سيتم تلوين حجم كل صفحة وفقًا لتجربة المستخدم المتوقعة:

• أقل من 130 كيلوبايت: أخضر - يجب أن يكون تطبيقك سريعًا في معظم ظروف الشبكة والجهاز.
• بين 130 كيلوبايت و 170 كيلوبايت: أصفر - يقترب تطبيقك من وقت تحميل 5-6 ثوانٍ في ظروف الجهاز والشبكة الأساسية العالمية.
• أكثر من 170 كيلوبايت: أحمر - من المحتمل أن يستغرق تطبيقك أكثر من 6 ثوانٍ للتحميل في نفس الظروف.

إخراج واجهة سطر أوامر Next.js الجديدة للإنتاج

نود أن نسمع ملاحظاتك حول إخراج البناء الجديد.

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

حشوات مضمنة جديدة: fetch() و URL و Object.assign

عند فحص العديد من تطبيقات المستخدمين وأمثلتنا، وجدنا أن معظمها يشحن بمجموعة مشابهة من الحشوات. في بعض الحالات، كان لدى التطبيقات حشوات مكررة لنفس الميزة.

لعلاج ذلك، تعاونا مع فريق Google Chrome لدمج حشوات لواجهات برمجة التطبيقات الثلاثة الأكثر شيوعًا التي لاحظناها.

باستخدام التحميل التفاضلي، لا يتم تحميل هذه الحشوات لـ 83% من حركة الويب عالميًا. هذا يعني أن غالبية مستخدميك لن يقوموا بتنزيل البايتات المرتبطة بهذه الحشوات - سيتم تنزيلها فقط إذا لزم الأمر.

علاوة على ذلك، سيتم التخلص تمامًا من أي حشوات معروفة قمنا بدمجها الآن من بناء الإنتاج الخاص بك. هذا يعني أنك لن تدفع ثمن أحد تبعياتك التي تستورد عن غير قصد حشوة لواحدة من هذه الواجهات.

قائمة الواجهات المدمجة والحشوات التي تجعلها قديمة هي كما يلي:

• fetch() - تستبدل: whatwg-fetch و unfetch.
• URL - تستبدل: حزمة url (واجهة Node.js).
• Object.assign() - تستبدل: object-assign, object.assign, و core-js/object/assign.

لا يزال عليك استيراد isomorphic-fetch أو isomorphic-unfetch إذا كنت تستخدم fetch() على الخادم.

هذا التغيير غير متعارض تمامًا، وجميع الحشوات مصنوعة بأكثر الإصدارات توافقًا مع المواصفات. النتيجة هي إزالة ما يصل إلى 18 كيلوبايت من JavaScript من حزم الإنتاج الخاصة بك في المتصفحات الحديثة.

تحميل الصفحات الأمثل: FCP و TTI أفضل

قام Next.js بتحسين تنفيذ التحميل المسبق لتقليل FCP و TTI بشكل عام.

عن طريق تجاوز خطأ في المتصفح، يتم الآن إعطاء الأولوية لـ CSS (عند استخدامه) بشكل صحيح على JavaScript. هذا يؤدي إلى أول عرض للمحتوى (FCP) أسرع، مما يؤدي إلى موقع ويب مكتمل بصريًا أسرع بكثير لمستخدميك النهائيين.

بالإضافة إلى ذلك، قمنا بتحسين جلب الصفحات المسبق لاستخدام طلبات شبكة ذات أولوية أقل.

علاوة على ذلك، تحدث هذه الطلبات فقط أثناء وقت فراغ المتصفح، مما يؤدي إلى وقت تفاعل أسرع. هذا لأن المتصفح سيعطي الأولوية لجعل تطبيقك تفاعليًا بدلاً من الجلب المسبق المتفائل.

FCP/TTI قبل وبعد التحسينات

دعم أحدث ميزات JavaScript

يحتوي Next.js على خط تجميع متقدم ومحسن للغاية يسمح لك باستخدام أحدث ميزات JavaScript. المساهمات الأخيرة التي قدمناها ساهمت مباشرة في انخفاض حجم التطبيق بنسبة 3-8%.

يمكن الاستفادة من ميزات JavaScript هذه دون القلق بشأن توافق المتصفح، حيث نقوم تلقائيًا بتجميع الكود الخاص بك لدعم جميع المتصفحات (باستثناء الإصدارات التي انتهى دعمها). وهذا يشمل ميزات ES6+، مثل async/await (ES2017), خصائص Object Rest/Spread (ES2018), import() الديناميكي (ES2020), والمزيد!

في هذا الإصدار، يسعدنا الإعلان عن دعم السلسلة الاختيارية (Stage 4) و الدمج الصفري (Stage 4).

function Page(props) {
  return (
    <p>{props?.deeply?.nested?.value}</p>
    /* ⬆ إذا لم يكن deeply.nested.value متاحًا فلن يتم عرضه */
  );
}
 
export default Page;

عامل السلسلة الاختيارية (?.)

function Page(props) {
  return (
    <p>{props.something ?? 'القيمة الافتراضية'}</p>
    /* ⬆ النتيجة هي "القيمة الافتراضية" */
  );
}
 
export default Page;

عامل الدمج الصفري (??)

في المستقبل، نخطط لإخراج حزم أكثر تحسينًا تلقائيًا عبر بناء module / nomodule.

دعم النشر بدون تكوين لتطبيقات next export

يعمل الآن أمر next export في Next.js مع النشر بدون تكوين من Vercel مباشرة. قبل هذا التغيير، كان على المستخدمين الذين يستفيدون من next export إنشاء now.json مخصص.

الاستفادة من وضع التصدير في Next.js على Vercel أصبح بسيطًا مثل وجود سكريبت build التالي في package.json:

{
  "scripts": {
    "build": "next build && next export"
  }
}

ثم يمكنك نشر تطبيق Next.js الخاص بك على Vercel باستخدام أمر واحد فقط. إذا لم تكن قد قمت بتثبيت Vercel بعد، يمكنك القيام بذلك عن طريق تثبيت Vercel CLI.

now

توافق واختيار وضع React الصارم

أصبح وقت تشغيل Next.js كاملًا متوافقًا مع الوضع الصارم (Strict Mode) في React. شمل ذلك تحديثات لمدير head في Next.js (<Head>), next/dynamic, وميزات أساسية أخرى. هذا يعني أن أوقات التشغيل تستخدم الآن hooks أو أزالت دورة الحياة المهملة، وتستخدم واجهة Context API الجديدة في React.

أضفنا أيضًا خيارًا ملائمًا لتمكين الوضع الصارم لتطبيقك.

للقيام بذلك، قم بتكوين الخيار التالي في next.config.js الخاص بك:

module.exports = {
  reactStrictMode: true,
};

إذا كنت أنت أو فريقك غير مستعدين لاستخدام الوضع الصارم في تطبيقك بالكامل، فلا بأس! يمكنك الهجرة تدريجيًا على أساس صفحة بصفحة باستخدام <React.StrictMode>.

على الرغم من أنه غير مطلوب، إلا أن الوضع الصارم سيفتح الكثير من التحسينات في المستقبل. لهذا السبب، نقترح أن تطلع عليه عاجلاً وليس آجلاً!

اختبار آلي ضد إصدارات React الليلية

بالتعاون الوثيق مع فريق React الأساسي، نقوم الآن باختبار Next.js ضد قناة next لـ React كل 12 ساعة.

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

قام فريق React الأساسي بتوثيق هذه العملية على أمل أن تحذو المشاريع الأخرى في نظام React البيئي حذوها.

المجتمع

نحن متحمسون للتغييرات القادمة التي ستحسن الحجم والأداء عبر جميع تطبيقات Next.js.

علاوة على ذلك، لا يزال مجتمع Next.js يتوسع:

• لدينا أكثر من 865 مساهم مستقل.
• على GitHub، تم تصنيف المشروع بأكثر من 43,700 نجمة.
• يحتوي دليل الأمثلة على أكثر من 220 مثالًا.

يضم مجتمع Next.js الآن أكثر من 13,600 عضو. انضم إلينا!

نحن ممتنون لمجتمعنا وكل الملاحظات والمساهمات الخارجية التي ساعدت في تشكيل هذا الإصدار.