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

الإصدار 15.3 من Next.js

يتضمن Next.js 15.3 Turbopack للبناء، وأدوات جديدة لمراقبة العميل (client instrumentation)، ووظائف التنقل (navigation hooks)، والمزيد.

يتضمن Next.js 15.3 Turbopack للبناء، وأدوات جديدة لمراقبة العميل (client instrumentation)، ووظائف التنقل (navigation hooks)، والمزيد:

قم بالترقية اليوم، أو ابدأ باستخدام:

Terminal
# استخدم أداة الترقية التلقائية CLI
npx @next/codemod@canary upgrade latest
 
# ...أو قم بالترقية يدويًا
npm install next@latest react@latest react-dom@latest
 
# ...أو ابدأ بمشروع جديد
npx create-next-app@latest

عمليات بناء Turbopack (إصدار ألفا)

بعد الإصدار المستقر لـ next dev --turbopack، أكثر من 50% من جلسات التطوير على Next.js 15 تستخدم الآن Turbopack.

يتضمن هذا الإصدار إصدار ألفا من next build --turbopack، مما يجلب نفس تحسينات الأداء من التطوير المحلي إلى عمليات بناء الإنتاج.

جرب Turbopack لعمليات بناء الإنتاج عن طريق الترقية إلى 15.3 وتشغيل:

Terminal
next build --turbopack

الوظائف

99.3% من اختبارات التكامل لـ next build تم اجتيازها بالفعل. يمكنك تتبع تقدمنا نحو 100% على areweturboyet.com. إذا كان تطبيقك يعمل بالفعل مع Turbopack لـ dev، فيجب أن يعمل كما هو مع build.

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

نحن نعمل بنشاط على سد هذه الفجوات في الأداء من خلال رفع النطاق (scope hoisting)، وتحسين التجزئة (chunking)، وتحسينات أخرى.

أداء البناء

لقد كنا نتحقق من Turbopack على مستودع Vercel الداخلي الكبير وقواعد التعليمات البرمجية للشركاء الأوائل. إحدى مزايا بنية Turbopack مقارنة بتنفيذ Webpack السابق هي أن الأداء يتوسع عند إضافة نوى المعالج:

  • عند 4 نوى: أسرع بنسبة 28% من Webpack
  • عند 16 نواة: أسرع بنسبة 60% من Webpack
  • عند 30 نواة: أسرع بنسبة 83% من Webpack

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

النظام البيئي

نحن نعمل مع تكاملات شائعة الاستخدام مثل Sentry للتأكد من أنها متوافقة مع next build --turbopack قبل الإصدار المستقر. يرجى التواصل مع @leerob على X إذا كنت مؤلف أداة ترغب في العمل معنا لضمان التوافق.

التغذية الراجعة

يرجى مشاركة ملاحظاتك، حتى لو سارت الأمور بسلاسة، لمساعدتنا في إعداد إصدار مستقر:

تكوين Turbopack في next.config.ts (مستقر)

انتقل تكوين Turbopack في next.config.ts من experimental.turbo إلى المفتاح الرئيسي turbopack:

next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};
 
export default nextConfig;

للتوافق، سيستمر دعم خيار experimental.turbo حتى الإصدار الرئيسي التالي من Next.js.

للحصول على قائمة كاملة بخيارات تكوين Turbopack، راجع مرجع واجهة برمجة تطبيقات Turbopack.

دعم المجتمع لـ Rspack (تجريبي)

قام فريق Rspack بإنشاء إضافة مجتمعية لـ Next.js.

يوفر هذا خيارًا لمستخدمي Next.js الذين يحتاجون إلى توافق شبه كامل مع واجهة برمجة تطبيقات Webpack، ولكن لا يمكنهم بعد الانتقال إلى Turbopack، لتحسين أوقات التجميع والبناء المحلية. نحن واثقون من تقدمنا مع Turbopack وسنستمر في توفير مسار تدريجي للمستخدمين Webpack.

بينما هذه ليست إضافة رسمية لـ Next.js، نحن نتعاون مع فريق Rspack. سيعمل كلا الفريقين معًا على أسس مشتركة مثل SWC و Lightning CSS، مما يفيد جميع مستخدمي Next.js والنظام البيئي الأوسع.

إذا كنت ترغب في استكشاف استخدام Rspack مع Next.js، يمكنك استخدام المحول next-rspack. نحن نقوم بتشغيل المحول ضد مجموعة اختبار التكامل الخاصة بنا. إنه يجتاز حاليًا حوالي 96% من الاختبارات.

عرض مثال أو تعلم المزيد في وثائق Rspack.

وظيفة مراقبة العميل (Client Instrumentation Hook)

يسمح لك ملف instrumentation-client.js|ts بإضافة رمز للمراقبة والتحليلات الذي يعمل قبل بدء تنفيذ التعليمات البرمجية الأمامية لتطبيقك.

هذا مثالي لإعداد تتبع الأداء، مراقبة الأخطاء، أو أدوات المراقبة الأخرى على جانب العميل في أقرب وقت ممكن في دورة الحياة.

instrumentation-client.js
// إعداد مراقبة الأداء
performance.mark('app-init');
 
// تهيئة التحليلات
console.log('تم تهيئة التحليلات');
 
// إعداد تتبع الأخطاء
window.addEventListener('error', (event) => {
  // إرسال إلى خدمة تتبع الأخطاء الخاصة بك
  reportError(event.error);
});

ضع هذا الملف في جذر مشروعك بشكل مشابه لـ مراقبة جانب الخادم (server-side instrumentation).

تعلم المزيد في وثائق ملف instrumentation-client.

وظائف التنقل (Navigation Hooks)

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

onNavigate

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

على عكس حدث onClick، الذي ينطلق لجميع النقرات، يمكن استخدام onNavigate لـ تطبيقات الصفحة الواحدة (SPA)، مما يسمح لك بتنفيذ التعليمات البرمجية أو حتى إلغاء التنقل باستخدام preventDefault().

يمكن استخدام هذه الواجهة لتنفيذ رسوم متحركة للانتقال، حراس التنقل، أو تتبع التحليلات التي يجب أن تعمل فقط أثناء انتقالات الصفحة الفعلية.

تعلم المزيد بزيارة وثائق onNavigate.

useLinkStatus

تأخذ وظيفة useLinkStatus لمكون العميل قيمة منطقية pending تشير إلى عندما يكون التنقل قيد التقدم، مما يمنحك تحكمًا مترجمًا في حالات التحميل.

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

عن طريق وضع مكون يستخدم useLinkStatus كسليل لمكون <Link> الخاص بك، يمكنك إنشاء عناصر واجهة مستخدم مستجيبة تتفاعل مع أحداث التنقل في الوقت الفعلي.

تعلم المزيد بزيارة وثائق useLinkStatus.

تحسينات أداء إضافة TypeScript

أصبح خادم لغة TypeScript (LSP) لـ Next.js أسرع الآن.

يوفر LSP ميزات Intellisense المضمنة مثل التحقق من حدود الخادم/العميل، تلميحات خاصية المكون، إكمال التكوين التلقائي، واكتشاف الأخطاء لواجهات برمجة التطبيقات غير المسموح بها في مكونات خادم React. في قواعد التعليمات البرمجية الكبيرة جدًا، كانت الإضافة قد تتسبب سابقًا في تعليق أو تعطل خدمة لغة TypeScript.

لقد قمنا بتحسينات كبيرة في الأداء لحل هذه المشكلات. في اختباراتنا الداخلية، تحسنت أوقات استجابة الإضافة بنحو 60% بدون تجميد أو تعطل.

تغييرات أخرى

  • [ميزة] دعم new URL() في images.remotePatterns (#77692)
  • [ميزة] أصبحت خيارات Viewport منفصلة عن metadata (#77427)
  • [ميزة] إضافة خيار unstable_dynamicOnHover (#77866)
  • [ميزة] إضافة دعم لـ Pinterest Rich Pins (#76988)
  • [تحسين] جعل revalidate يعمل عند متابعته بإعادة توجيه في Route Handlers (#77090)
  • [تحسين] ضمان اتساق قوي بعد استدعاء revalidate في Server Actions (#76885)
  • [تحسين] ترقية sharp لتحويل أسرع من PNG إلى AVIF (#77839)

المساهمون

Next.js هو نتيجة العمل المشترك لأكثر من 3000 مطور فردي. تم تقديم هذا الإصدار بواسطة:

شكرًا جزيلاً لـ @raunofreiberg، @huozhi، @ijjk، @timneutkens، @gaojude، @leerob، @mezotv، @bgw، @samcx، @ztanner، @sokra، @mischnic، @wbinnssmith، @kdy1، @unstubbable، @ahabhgk، @ScriptedAlchemy، @SukkaW، @wyattjoh، @eps1lon، @Amirroid، @Netail، @lubieowoce، @gnoff، @jackwilson323، @acdlite، @sbougerel، @kevva، @kasperpeulen، @Cy-Tek، @dvoytenko، @husseinraoouf، @isBatak، @iamkd، @delbaoliveira، @jantimon، @padmaia، @Bernardoow، @styfle، @devjiwonchoi، @JamBalaya56562، و @Marukome0743 للمساعدة!