Next.js 14.2

يتضمن Next.js 14.2 تحسينات في التطوير والإنتاج والتخزين المؤقت.

• Turbopack للتطوير (مرشح للإصدار): نجاح 99.8% من اختبارات next dev --turbo.
• تحسينات البناء والإنتاج: تقليل استخدام ذاكرة البناء وتحسينات CSS.
• تحسينات التخزين المؤقت: فترات إبطال قابلة للتكوين باستخدام staleTimes.
• تحسينات تجربة المطور للأخطاء: تحسين أخطاء عدم تطابق الترطيب وتحديثات التصميم.

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

npx create-next-app@latest

Turbopack للتطوير (مرشح للإصدار)

على مدى الأشهر القليلة الماضية، كنا نعمل على تحسين أداء التطوير المحلي باستخدام Turbopack. في الإصدار 14.2، أصبح مرشح الإصدار من Turbopack متاحًا الآن للتطوير المحلي:

• نجاح 99.8% من اختبارات التكامل.
• تحققنا من أن أهم 300 حزمة npm المستخدمة في تطبيقات Next.js يمكن تجميعها باستخدام Turbopack.
• جميع أمثلة Next.js تعمل مع Turbopack.
• قمنا بدمج Lightning CSS، وهو حزمة CSS سريعة ومصغر، مكتوب بلغة Rust.

كنا نختبر Turbopack بشكل مكثف مع تطبيقات Vercel. على سبيل المثال، مع تطبيق vercel.com الكبير الذي يعمل بـ Next.js، لاحظنا:

• أسرع بنسبة 76.7% في بدء تشغيل الخادم المحلي.
• أسرع بنسبة 96.3% في تحديثات الكود مع Fast Refresh.
• أسرع بنسبة 45.8% في تجميع المسار الأولي بدون تخزين مؤقت (لا يمتلك Turbopack تخزين مؤقت على القرص بعد).

لا يزال Turbopack اختياريًا ويمكنك تجربته باستخدام:

next dev --turbo

سنركز الآن على تحسين استخدام الذاكرة، وتنفيذ التخزين المؤقت الدائم، و next build --turbo.

• استخدام الذاكرة - قمنا ببناء أدوات منخفضة المستوى للتحقيق في استخدام الذاكرة. يمكنك الآن إنشاء ملفات تتبع تتضمن مقاييس الأداء ومعلومات استخدام الذاكرة العامة. تتيح هذه الملفات التحقيق في الأداء واستخدام الذاكرة دون الحاجة إلى الوصول إلى كود مصدر التطبيق.
• التخزين المؤقت الدائم - نستكشف أيضًا أفضل خيارات البنية، ونخطط لمشاركة المزيد من التفاصيل في إصدار مستقبلي.
• next build - بينما Turbopack غير متاح حاليًا للبناء، نجح 74.7% من الاختبارات بالفعل. يمكنك متابعة التقدم على areweturboyet.com/build.

لمعرفة قائمة الميزات المدعومة وغير المدعومة في Turbopack، يرجى الرجوع إلى توثيقنا.

تحسينات البناء والإنتاج

بالإضافة إلى تحسينات الحزمة مع Turbopack، عملنا على تحسين أداء البناء والإنتاج بشكل عام لجميع تطبيقات Next.js (كلاً من Pages و App Router).

إزالة الأكواد غير المستخدمة (Tree-shaking)

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

اختبار هذا التحسين على مكتبة شهيرة مثل react-aria-components قلل حجم الحزمة النهائية بنسبة -51.3%.

ملاحظة: لا يعمل هذا التحسين حاليًا مع ملفات البرميل (barrel files). في الوقت الحالي، يمكنك استخدام خيار التكوين optimizePackageImports:

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
};

استخدام ذاكرة البناء

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

تظهر اختباراتنا الأولية أنه في تطبيق Next.js بسيط، انخفض استخدام الذاكرة وحجم ملفات التخزين المؤقت من 2.2 جيجابايت إلى أقل من 190 ميجابايت في المتوسط.

لتسهيل تصحيح أداء الذاكرة، أضفنا علامة --experimental-debug-memory-usage إلى next build. تعلم المزيد في توثيقنا.

CSS

قمنا بتحديث كيفية تحسين CSS أثناء عمليات بناء Next.js للإنتاج عن طريق تقسيم CSS لتجنب تضارب الأنماط عند التنقل بين الصفحات.

يتم الآن تحديد ترتيب ودمج أجزاء CSS حسب ترتيب الاستيراد. على سبيل المثال، سيتم ترتيب base-button.module.css قبل page.module.css:

import styles from './base-button.module.css';
 
export function BaseButton() {
  return <button className={styles.primary} />;
}

import { BaseButton } from './base-button';
import styles from './page.module.css';
 
export function Page() {
  return <BaseButton className={styles.primary} />;
}

للحفاظ على الترتيب الصحيح لـ CSS، نوصي بما يلي:

• استخدام وحدات CSS بدلاً من الأنماط العامة.
• استيراد وحدة CSS في ملف JS/TS واحد فقط.
• إذا كنت تستخدم أسماء فئات عامة، قم باستيراد الأنماط العامة في نفس ملف JS/TS أيضًا.

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

تحسينات التخزين المؤقت

يعد التخزين المؤقت جزءًا أساسيًا من بناء تطبيقات الويب السريعة والموثوقة. عند إجراء التغييرات، يتوقع كل من المستخدمين والمطورين تحديث التخزين المؤقت ليعكس أحدث التغييرات. كنا نستكشف كيفية تحسين تجربة التخزين المؤقت في Next.js في App Router.

staleTimes (تجريبي)

ذاكرة التوجيه من جانب العميل هي طبقة تخزين مؤقت مصممة لتوفير تجربة تنقل سريعة عن طريق تخزين المسارات التي تمت زيارتها واستباقها على العميل.

بناءً على ملاحظات المجتمع، أضفنا خيارًا تجريبيًا staleTimes للسماح بتكوين فترة إبطال ذاكرة التوجيه من جانب العميل.

بشكل افتراضي، سيتم تخزين المسارات المستبقة (باستخدام مكون <Link> بدون خاصية prefetch) لمدة 30 ثانية، وإذا تم تعيين خاصية prefetch على true، فستكون 5 دقائق. يمكنك تجاوز هذه القيم الافتراضية عن طريق تحديد أوقات إعادة التحقق مخصصة في next.config.js:

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
};
 
module.exports = nextConfig;

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

تعلم المزيد عن staleTimes في توثيقنا.

المسارات المتوازية والمتقاطعة (Parallel and Intercepting Routes)

نواصل العمل على تحسين المسارات المتوازية (Parallel Routes) والمسارات المتقاطعة (Intercepting Routes)، مع تحسين التكامل مع ذاكرة التخزين المؤقت لموجه العميل (Client-side Router Cache).

• المسارات المتوازية والمتقاطعة التي تستدعي إجراءات الخادم (Server Actions) باستخدام revalidatePath أو revalidateTag ستعيد التحقق من صحة الذاكرة المؤقتة وتحديث الأقسام المرئية مع الحفاظ على العرض الحالي للمستخدم.
• وبالمثل، سيؤدي استدعاء router.refresh الآن إلى تحديث الأقسام المرئية بشكل صحيح مع الحفاظ على العرض الحالي.

تحسينات تجربة المطور للأخطاء (Errors DX Improvements)

في الإصدار 14.1، بدأنا العمل على تحسين قابلية قراءة رسائل الأخطاء وتتبع المكدس (stack traces) عند تشغيل next dev. وقد استمر هذا العمل في الإصدار 14.2 ليشمل الآن رسائل أخطاء أفضل، وتحسينات في تصميم الطبقة العلوية (overlay) لكل من موجه التطبيق (App Router) وموجه الصفحات (Pages Router)، ودعم الوضعين الفاتح والداكن، وسجلات dev وbuild أكثر وضوحًا.

على سبيل المثال، تعد أخطاء الترطيب (Hydration errors) في React مصدرًا شائعًا للارتباك في مجتمعنا. بينما قمنا بتحسينات لمساعدة المستخدمين في تحديد مصدر عدم تطابق الترطيب (انظر أدناه)، فإننا نعمل مع فريق React لتحسين رسائل الأخطاء الأساسية وعرض اسم الملف الذي حدث فيه الخطأ.

قبل:

مثال على طبقة الأخطاء في Next.js قبل الإصدار 14.2.

بعد:

مثال على طبقة الأخطاء في Next.js بعد الإصدار 14.2.

React 19

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

الميزات الجديدة مثل الإجراءات (Actions) والخطافات (hooks) المرتبطة بها، والتي كانت متاحة في Next.js من قناة React التجريبية (React canary channel)، ستكون الآن متاحة لجميع تطبيقات React (بما في ذلك التطبيقات التي تعمل على جانب العميل فقط). نحن متحمسون لرؤية اعتماد أوسع لهذه الميزات في نظام React البيئي.

تحسينات أخرى (Other Improvements)

• [التوثيق] وثائق جديدة حول تحسين الفيديو (Video Optimization) (PR).
• [التوثيق] وثائق جديدة حول instrumentation.ts (PR)
• [ميزة] خاصية overrideSrc جديدة لـ next/image (PR).
• [ميزة] وسيط revalidateReason جديد لـ getStaticProps (PR).
• [تحسين] إعادة هيكلة منطق البث (streaming logic)، مما يقلل من وقت بث الصفحات في الإنتاج (PR).
• [تحسين] دعم لإجراءات الخادم المتداخلة (nested Server Actions) (PR).
• [تحسين] دعم للتوطين في خرائط الموقع المولدة (Sitemaps) (PR).
• [تحسين] تحسينات بصرية لسجلات التطوير والبناء (PR)
• [تحسين] حماية الانحراف (Skew protection) مستقرة على Vercel (Docs).
• [تحسين] جعل useSelectedLayoutSegment متوافقًا مع موجه الصفحات (Pages Router) (PR).
• [تحسين] تخطي تحذيرات metadataBase عندما لا تحتاج عناوين URL المطلقة إلى الحل (PR).
• [تحسين] إصلاح إجراءات الخادم التي لا يتم إرسالها عند تعطيل JavaScript عند النشر على Vercel (PR)
• [تحسين] إصلاح الخطأ حول عدم العثور على إجراء الخادم في بيان الإجراءات (actions manifest) إذا تم تشغيله بعد الانتقال بعيدًا عن الصفحة المشار إليها، أو إذا تم استخدامه داخل قسم مسار متوازي غير نشط (PR)
• [تحسين] إصلاح استيرادات CSS في المكونات المحملة بواسطة next/dynamic (PR).
• [تحسين] تحذير عند فقدان خاصية unoptimized للصور المتحركة (PR).
• [تحسين] عرض رسالة خطأ إذا لم يصدر images.loaderFile دالة افتراضية (PR)

المجتمع (Community)

يضم Next.js الآن أكثر من مليون مطور نشط شهريًا. نحن ممتنون لدعم المجتمع ومساهماته. انضم إلى النقاش على GitHub Discussions، وReddit، وDiscord.

المساهمون (Contributors)

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

• فريق Next.js: Andrew، Balazs، Ethan، Janka، Jiachi، Jimmy، JJ، Josh، Sam، Sebastian، Sebbie، Shu، Steven، Tim، Wyatt، و Zack.
• فريق Turbopack: Donny، Leah، Maia، OJ، Tobias، و Will.
• وثائق Next.js: Delba، Steph، Michael، Anthony، و Lee.

شكر خاص لـ @taishikato، @JesseKoldewijn، @Evavic44، @feugy، @liamlaverty، @dvoytenko، @SukkaW، @wbinnssmith، @rishabhpoddar، @better-salmon، @ziyafenn، @A7med3bdulBaset، @jasonuc، @yossydev، @Prachi-meon، @InfiniteCodeMonkeys، @ForsakenHarmony، @miketimmerman، @kwonoj، @williamli، @gnoff، @jsteele-stripe، @chungweileong94، @WITS، @sogoagain، @junioryono، @eisafaqiri، @yannbolliger، @aramikuto، @rocketman-21، @kenji-webdev، @michaelpeterswa، @Dannymx، @vpaflah، @zeevo، @chrisweb، @stefangeneralao، @tknickman، @Kikobeats، @ubinatus، @code-haseeb، @hmmChase، @byhow، @DanielRivers، @wojtekmaj، @paramoshkinandrew، @OMikkel، @theitaliandev، @oliviertassinari، @Ishaan2053، @Sandeep-Mani، @alyahmedaly، @Lezzio، @devjiwonchoi، @juliusmarminge، @szmazhr، @eddiejaoude، @itz-Me-Pj، @AndersDJohnson، @gentamura، @tills13، @dijonmusters، @SaiGanesh21، @vordgi، @ryota-murakami، @tszhong0411، @officialrajdeepsingh، @alexpuertasr، @AkifumiSato، @Jonas-PFX، @icyJoseph، @florian-lp، @pbzona، @erfanium، @remcohaszing، @bernardobelchior، @willashe، @kevinmitch14، @smakosh، @mnjongerius، @asobirov، @theoholl، @suu3، @ArianHamdi، @adrianha، @Sina-Abf، @kuzeykose، @meenie، @nphmuller، @javivelasco، @belgattitude، @Svetoslav99، @johnslemmer، @colbyfayock، @mehranmf31، @m-nakamura145، @ryo8000، @aryaemami59، @bestlyg، @jinsoul75، @petrovmiroslav، @nattui، @zhuyedev، @dongwonnn، @nhducit، @flotwig، @Schmavery، @abhinaypandey02، @rvetere، @coffeecupjapan، @cjimmy، @Soheiljafarnejad، @jantimon، @zengspr، @wesbos، @neomad1337، @MaxLeiter، و @devr77 للمساعدة!