Backالعودة إلى المدونة

Next.js 11.1

يأتي Next.js 11.1 مع تصحيح أمان مهم، دعم وحدات ES، تحسينات في الأداء، أدوات مبنية بلغة Rust، جلب بيانات أسرع بمرتين عند التصيير المسبق، والمزيد!

نحن نحسن أداء البناء عبر جميع طبقات Next.js مع الإصدار 11.1، الذي يتضمن:

قم بالتحديث اليوم عن طريق تشغيل npm i next@latest.

تصحيح أمان

يعمل فريق Next.js مع باحثي الأمن والمدققين لمنع الثغرات الأمنية. نحن ممتنون لـ Gabriel Benmergui من Robinhood للتحقيق واكتشاف إعادة توجيه مفتوح مع pages/_error.js والإفصاح المسؤول اللاحق.

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

لمزيد من التفاصيل، يرجى قراءة CVE العام. نوصي بالترقية إلى أحدث إصدار من Next.js لتحسين الأمان العام لتطبيقك. للإبلاغ عن تقارير الإفصاح المسؤول في المستقبل، راسلنا على [email protected].

ملاحظة: تطبيقات Next.js المستضافة على Vercel غير متأثرة بهذا الخلل (وبالتالي، لا يلزم اتخاذ أي إجراء لتطبيقات Next.js التي تعمل على Vercel.

دعم وحدات ES

نحن نعمل على دعم شامل لوحدات ES في Next.js، سواء كوحدات إدخال أو كهدف إخراج. بدءًا من Next.js 11.1، يمكنك الآن استيراد حزم npm باستخدام وحدات ES (مثل "type": "module" في ملف package.json الخاص بهم) باستخدام علم تجريبي.

next.config.js
module.exports = {
  // تفضيل تحميل وحدات ES على CommonJS
  experimental: { esmExternals: true },
};

يتضمن دعم وحدات ES توافقًا عكسيًا لدعم سلوك الاستيراد السابق لـ CommonJS. في Next.js 12، سيصبح esmExternals: true هو الإعداد الافتراضي. نوصي بتجربة الخيار الجديد وترك تعليقات في مناقشات GitHub إذا كانت لديك اقتراحات للتحسين.

اعتماد SWC المبنية على Rust

نحن نعمل على تكامل SWC، وهو مترجم JavaScript و TypeScript فائق السرعة مكتوب بلغة Rust، والذي سيحل محل سلسلتين من الأدوات المستخدمة في Next.js: Babel للملفات الفردية و Terser لتصغير حزم الإخراج.

كجزء من استبدال Babel بـ SWC، نقوم بتحويل جميع تحويلات التعليمات البرمجية المخصصة التي يستخدمها Next.js إلى تحويلات SWC مكتوبة بلغة Rust لتحقيق أقصى أداء. على سبيل المثال، هز الشجرة للتعليمات البرمجية غير المستخدمة داخل getStaticProps، getStaticPaths، و getServerSideProps.

كجزء من استبدال Terser، نعمل على ضمان أن يكون المختصر SWC له إخراج مشابه لـ Terser مع تحسين الأداء بشكل كبير وتوازي التصغير.

في الاختبارات المبكرة، انخفضت تحويلات التعليمات البرمجية السابقة باستخدام Babel من ~500ms إلى ~10ms وانخفض تصغير التعليمات البرمجية من Terser من ~250ms إلى ~30ms باستخدام SWC. بشكل عام، أدى هذا إلى بناء أسرع بمرتين.

يسعدنا أن نعلن أن DongYoon Kang، مبتكر SWC، وMaia Teegarden، المساهم في Parcel، قد انضما إلى فريق Next.js في Vercel للعمل على تحسين أداء next dev و next build. سنشارك المزيد من النتائج من اعتمادنا لـ SWC في الإصدار التالي عندما يصبح مستقرًا.

تحسينات الأداء

البناء وجلب البيانات

عند استخدام next build وإجراء العديد من طلبات HTTP، قمنا بتحسين الأداء بمقدار ~2x في المتوسط. على سبيل المثال، إذا كنت تستخدم getStaticProps و getStaticPaths لجلب المحتوى من نظام إدارة محتوى Headless، يجب أن تلاحظ بناء أسرع بشكل ملحوظ.

يقوم Next.js تلقائيًا بتوفير node-fetch ويمكّن الآن HTTP Keep-Alive افتراضيًا. وفقًا لمعايير خارجية، يجب أن يجعل هذا التصيير المسبق أسرع بمقدار ~2x.

لتعطيل HTTP Keep-Alive لبعض استدعاءات fetch()، يمكنك إضافة خيار agent:

import { Agent } from 'https';
const url = '<https://example.com>';
const agent = new Agent({ keepAlive: false });
fetch(url, { agent });

للتجاوز عن جميع استدعاءات fetch() عالميًا، يمكنك استخدام next.config.js:

next.config.js
module.exports = {
  httpAgentOptions: {
    keepAlive: false,
  },
};

خرائط المصدر

تضمين خرائط مصدر المتصفح في تطبيقات Next.js أصبح الآن له تكلفة أداء أقل بنسبة 70% وتكلفة ذاكرة أقل بنسبة 67% بسبب تحسينات في معالجة أصول webpack وخرائط المصدر.

هذا يؤثر فقط على تطبيقات Next.js التي لديها productionBrowserSourceMaps: true في ملف next.config.js. مع Next.js 11.1، زادت أوقات البناء بنسبة 11% فقط عند تمكين خرائط المصدر.

لقد تعاونا أيضًا مع Sentry لزيادة أداء تحميل خرائط المصدر مع ملحق Sentry لـ Next.js.

تحسينات ESLint

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

قواعد إمكانية الوصول الافتراضية

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

شكر خاص للمساهم في المجتمع JeffersonBledsoe لإضافة هذه القواعد.

الأخطاء الإملائية الشائعة

الفحص للأخطاء الإملائية الشائعة في getStaticProps، getStaticPaths، و getServerSideProps ستحذر الآن افتراضيًا. هذا سيساعد في الحالات التي يتسبب فيها خطأ إملائي صغير في عدم استدعاء جلب البيانات. على سبيل المثال getstaticprops أو getStaticprops ستعرض تحذيرًا.

شكر خاص للمساهم في المجتمع kaykdm لإنشاء هذه القاعدة.

تحسينات next/image

لقد جمعنا ملاحظات المجتمع حول next/image وتحسين الصور المدمج ويسعدنا مشاركة تحسينات متعددة للأداء وتجربة المطور وتجربة المستخدم.

تحسين الصور

افتراضيًا، يستخدم Next.js WebAssembly لتنفيذ تحسين الصور، مما يعوض وقت تثبيت حزمة Next.js بكونه أصغر بكثير وليس لديه خطوة ما بعد التثبيت. مع Next.js 11.1، يمكنك تثبيت sharp اختياريًا والذي يحسن وقت توليد الصور غير المخزنة مؤقتًا مع مقايضة تثبيت أبطأ.

تم تحديث محسن الصور القائم على WebAssembly لدعم شرائح ARM مثل Apple M1 مع Node.js 16.

يقوم محسن الصور المدمج الآن باكتشاف نوع محتوى الصورة الخارجي تلقائيًا بناءً على محتوى جسم الاستجابة. هذا يسمح لـ Next.js بتحسين الصور المستضافة على AWS S3 عندما يكون رأس الاستجابة Content-Type: application/octet-stream.

توليد كسول لعناصر نائبة Blur أثناء التطوير

أثناء next dev استيراد الصور الثابتة مع placeholder="blur" يتم توليدها الآن بشكل كسول تلقائيًا، مما يحسن وقت بدء خادم التطوير للتطبيقات التي تحتوي على العديد من استيرادات الصور الثابتة:

pages/index.js
import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // العنصر النائب لهذه الصورة يتم توليده بشكل كسول أثناء التطوير
    <Image src={author} alt="صورة المؤلف" placeholder="blur" />
  );
}

تحسينات أخرى للصور

  • الصور التي تم تحميلها مسبقًا لم تعد تُحمل بكسلولة: عندما يتم تحميل صورة على صفحة من قبل، سواء من خلال التنقل بين الصفحات أو تحميلها في نقطة أخرى في الصفحة، سيتخطى Next.js الآن التحميل الكسول تلقائيًا لتجنب ومضة سريعة قبل عرض الصورة.
  • دعم محملات الصور المخصصة مع next export: يدعم next/image الآن استخدام next export مع أي خدمة تحسين صور تابعة لجهة خارجية. يمكنك تكوين images.loader: "custom" في next.config.js عندما تنوي تقديم خاصية loader المخصصة لـ next/image.
  • حدث جديد عند اكتمال تحميل الصور: بناءً على ملاحظات المستخدمين، أضفنا خاصية جديدة onLoadingComplete إلى next/image. هذا يسمح بتسجيل رد اتصال يتم استدعاؤه بمجرد اكتمال تحميل الصورة بالكامل.
  • تكوين TTL الافتراضي (وقت البقاء) لخبء الصور: يمكنك الآن تكوين images.minimumCacheTTL في next.config.js لتغيير TTL الافتراضي للصور المحسنة. عندما يكون ذلك ممكنًا، نوصي باستخدام استيراد الصور الثابتة، حيث تستخدم هذه TTL الأقصى تلقائيًا لأن تجزئة محتوى الصورة موجودة في URL.

المجتمع

Next.js هو نتيجة العمل المشترك لأكثر من 1700 مطور فردي، شركاء صناعيين مثل Google و Facebook، وفريقنا الأساسي.

نحن فخورون برؤية هذا المجتمع يستمر في النمو. في الأشهر الستة الماضية وحدها، شهدنا زيادة بنسبة 50٪ في تنزيلات Next.js على NPM، من 4.1 مليون إلى 6.2 مليون، وعدد الصفحات الرئيسية التي تستخدم Next.js في أفضل 10000 موقع على Alexa قد نما بنسبة 50٪.

تم إنجاز هذا الإصدار بفضل مساهمات: @abotsi، @adam-cowley، @afbarbaro، @akellbl4، @AndreVarandas، @andys-github، @angeloashmore، @apuyou، @arturmuller، @AryanBeezadhur، @atcastle، @borekb، @brandonchinn178، @breyed، @brijendravarma، @ctbarna، @ctjlewis، @darshkpatel، @delbaoliveira، @destruc7i0n، @devknoll، @enesakar، @enzoferey، @euess، @fabb، @gnbaron، @hiro0218، @housseindjirdeh، @huozhi، @ijjk، @JacobLey، @jameshoward، @jamsinclair، @janicklas-ralph، @jarvelov، @javivelasco، @jaybekster، @JeffersonBledsoe، @jflayhart، @johnrackles، @jviide، @karlsander، @kasipavankumar، @kaykdm، @kdy1، @kylemh، @leerob، @LetItRock، @lsndr، @lucleray، @m-abdelwahab، @mandarons، @markkaylor، @mastoj، @michalbundyra، @michielvangendt، @Munawwar، @mvasilkov، @NickCrews، @NickKelly1، @noahweingand، @noreiller، @nyedidikeke، @omasher، @orta، @pa-rang، @padmaia، @papaponmx، @PaulvdDool، @petermekhaeil، @phocks، @pranavp10، @qwertyforce، @raon0211، @reod، @rishabhpoddar، @roim، @Ryz0nd، @sa3dany، @sachinraja، @samrobbins85، @schoenwaldnils، @schultzp2020، @sedlukha، @sergioalvz، @shibe23، @smitssjors، @sohamsshah، @sokra، @stefanprobst، @stovmascript، @stuymedova، @styfle، @tanys123، @ThangHuuVu، @theostrahlen، @thomasmarshall، @tigger9flow، @timneutkens، @Timvdv، @tmcgann، @tomchen، @UniqueNL، @Vadorequest، @vitalybaev، @yunger7، @zackdotcomputer، @zeekrey