Next.js 10.2

نحن متحمسون لتقديم Next.js 10.2 الذي يتضمن:

• بناء أسرع: أسرع بنسبة تصل إلى ~60% في عمليات البناء اللاحقة مع التخزين المؤقت.
• تحديث أسرع: أسرع بمقدار 100ms إلى 200ms في التحديث.
• بدء تشغيل أسرع: أسرع بنسبة تصل إلى ~24% في next dev.
• تحسين إمكانية الوصول: يتم الآن إعلان تغييرات المسار بواسطة قارئات الشاشة.
• تحويلات وإعادة توجيه أكثر مرونة: مطابقة أي رأس، ملف تعريف ارتباط، أو معلمة سلسلة استعلام.
• تحسين أداء خطوط الويب التلقائي: تحسين الأداء عن طريق تضمين CSS الخطوط.

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

Webpack 5

مع Next.js 10.1، قمنا بتحسين التحديث السريع وتقليل أوقات التثبيت. نحن متحمسون لمشاركة تحسينات الأداء الإضافية التي تم تمكينها من خلال webpack 5.

اليوم، نقوم بتوسيع نشر webpack 5 لتطبيقات Next.js. بدءًا من Next.js 10.2، جميع التطبيقات التي لا تستخدم تكوين webpack مخصص في ملف next.config.js الخاص بها ستستخدم webpack 5 تلقائيًا.

عند تمكين webpack 5، ستحصل تلقائيًا على ميزات وتحسينات جديدة مثل:

• تحسين التخزين المؤقت على القرص: يسمح التخزين المؤقت على القرص للمترجم بالحفاظ على العمل بين عمليات تشغيل next build. سيتم إعادة ترجمة الملفات المتغيرة فقط، مما يؤدي إلى تحسين الأداء. لاحظ عميل Vercel Scale زيادة في السرعة بنسبة 63% في عمليات البناء اللاحقة.
• تحسين التحديث السريع: يركز Next.js الآن على الترجمة المتعلقة بالتحديث السريع، مما يؤدي إلى تحديث أسرع بمقدار 100ms إلى 200ms في كل مرة.
• تحسين التخزين المؤقت طويل الأمد للأصول: أصبح الإخراج بين عمليات next build المتعددة الآن حتميًا، مما يحسن التخزين المؤقت للمتصفح لأصول JavaScript في الإنتاج. تبقى التجزئات كما هي عندما لا يتغير محتوى الصفحة.
• تحسين التخلص من الشجرة (Tree Shaking): يمكن الآن التخلص من وحدات CommonJS تلقائيًا لإزالة الكود غير المستخدم. يتم استخدام التحليل الثابت لتحديد الوحدات الخالية من الآثار الجانبية. يتتبع export * المزيد من المعلومات ولا يحدد التصدير الافتراضي على أنه مستخدم. كما تم تمكين التخلص من الشجرة داخل الوحدة، مما يسمح باستيراد العناصر المستخدمة فقط في تصدير غير مستخدم ليتم التخلص منها.

لقد عملنا بجد لضمان انتقال سلس من webpack 4 إلى 5. مجموعة اختبارات Next.js الأساسية التي تضم أكثر من 3400 اختبار تكامل تعمل في كل طلب سحب مع تمكين دعم webpack 5.

إذا كان تطبيقك يحتوي على تكوين webpack مخصص، نوصي باتباع الوثائق لتمكين webpack 5. بعد الترقية إلى webpack 5 في Next.js، يرجى مشاركة أي ملاحظات معنا.

تحسين أداء بدء التشغيل

لقد قمنا بتحسين تهيئة سطر أوامر Next.js مما يجعل وقت بدء تشغيل next dev أسرع بنسبة 24% بعد التشغيل الأول. على سبيل المثال، next dev لـ vercel.com انخفض من 3.3s إلى 2.5s.

نحن في مهمة لجعل تجربة التطوير المحلية لديك في الوقت الفعلي (أسرع بـ 20 مرة). ترقبوا المزيد من تحسينات أداء بدء التشغيل في الإصدارات القادمة.

تحسينات إمكانية الوصول

يتم الآن إعلان تغييرات المسار لقارئات الشاشة وتقنيات المساعدة الأخرى افتراضيًا.

يظهر المثال أدناه العنوان "بيانات حقيقية. أداء حقيقي" يتم الإعلان عنه بواسطة macOS VoiceOver عند التنقل من جانب العميل. يتم العثور على اسم الصفحة أولاً بالبحث عن عنصر <h1>، ثم التراجع إلى document.title، وأخيرًا إلى مسار الصفحة.

يتم الآن الإعلان عن تغييرات المسار تلقائيًا.

شكرًا لـ Kyle Boss و Kitty Giraudel للمساعدة في تحقيق هذه الميزة.

التوجيه بناءً على الرؤوس ومعلمات سلسلة الاستعلام

تدعم الآن إعادة الكتابة، إعادة التوجيه، و الرؤوس في Next.js خاصية has الجديدة التي تتيح لك المطابقة ضد الرؤوس الواردة، ملفات تعريف الارتباط، وسلاسل الاستعلام.

يستخدم عميل Vercel Joyn خاصية has لتحسين المحتوى لكل من إمكانية الاكتشاف والأداء. على سبيل المثال، يمكنك إعادة توجيه المتصفحات القديمة بناءً على وكيل المستخدم (User-Agent):

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)',
          },
        ],
        destination: '/old-browser',
        permanent: false,
      },
    ];
  },
};

مثال آخر يمكن أن يكون إعادة توجيه المستخدمين بناءً على موقعهم:

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB',
          },
        ],
        destination: '/uk/:path*',
        permanent: true,
      },
    ];
  },
};

أخيرًا، يمكنك إعادة توجيه إذا كان المستخدم قد سجل دخوله بالفعل:

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false,
      },
    ];
  },
};

لمعرفة المزيد واستكشاف أمثلة إضافية، تحقق من وثائق إعادة التوجيه.

تحسين أداء خطوط الويب التلقائي

82% من صفحات الويب لأجهزة الكمبيوتر تستخدم خطوط الويب. الخطوط المخصصة مهمة للعلامة التجارية، التصميم، واتساق المتصفح/الجهاز لموقعك. ومع ذلك، لا ينبغي أن يأتي استخدام خط الويب على حساب الأداء.

يدعم Next.js الآن تحسين أداء خطوط الويب التلقائي عند استخدام خطوط الويب. افتراضيًا، سيقوم Next.js تلقائيًا بتضمين CSS الخطوط في وقت البناء، مما يلغي الحاجة إلى جولة إضافية لجلب تصريحات الخطوط. يؤدي هذا إلى تحسينات في First Contentful Paint (FCP) و Largest Contentful Paint (LCP). على سبيل المثال:

// قبل
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
 
// بعد
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    <!-- ... -->
  }
</style>

يدعم تحسين أداء خطوط الويب التلقائي حاليًا خطوط Google ونحن نعمل على توسيع الدعم لمزودي الخطوط الآخرين. نحن نخطط أيضًا لإضافة تحكم في استراتيجيات التحميل وقيم font-display. من خلال تحسين الخطوط افتراضيًا، يمكننا مساعدة المطورين على إطلاق مواقع ويب أسرع وتحسين Core Web Vitals الخاصة بهم دون أي جهد إضافي.

شكرًا لشركائنا في Google و Janicklas Ralph للمساعدة في تحقيق هذه الميزة.

توسيع الفريق

يسعدنا أن نعلن أن توبياس كوبرز، مؤلف webpack، قد انضم إلى فريق Next.js في Vercel.

المجتمع

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

تم تحقيق هذا الإصدار بفضل مساهمات: @rpxs، @lemarier، @RayhanADev، @janicklas-ralph، @devknoll، @felipeptcho، @rishabhpoddar، @sokra، @m-leon، @turadg، @PierreBerger، @divmain، @dominikwilkowski، @pranavp10، @ijjk، @santidalmasso، @HaNdTriX، @jamesgeorge007، @garmeeh، @leerob، @shuding، @feute، @timneutkens، @alexvilchis، @Timer، @malixsys، @sahilrajput03، @marcvangend، @steven-tey، @julienben، @umarsenpai، @Mzaien، @merceyz، @AntelaBrais، @SystemDisc، @M1ck0، @jbmoelker، @jaisharx، @amannn، @vkarpov15، @gaelhameon، @4ortytwo، @Simply007، @styxlab، @xCloudzx، @wodCZ، @emmanuelgautier، @leosuncin، @ludder، @geritol، @vassbence، @vvo، @portenez، @arshad، @tarunama، @flybayer، @Hanaffi، @SokratisVidros، @chibicode، @kylemarshall18، و @jarrodwatts.