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

يتضمن Next.js 14.1 تحسينات في تجربة المطورين تشمل:

• تحسينات في الاستضافة الذاتية: وثائق جديدة ومعالج ذاكرة تخزين مؤقت مخصص
• تحسينات Turbopack: نجاح 5,600 اختبار لـ next dev --turbo
• تحسينات تجربة المطور: تحسين رسائل الأخطاء، دعم pushState و replaceState
• المسارات المتوازية والمقاطعة: إصلاح 20 خطأ بناءً على ملاحظاتكم
• تحسينات next/image: دعم <picture>، التوجيه الفني، والوضع المظلم

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

npx create-next-app@latest

تحسينات الاستضافة الذاتية

لقد استمعنا لملاحظاتكم حول الحاجة لمزيد من الوضوح حول كيفية استضافة Next.js ذاتيًا باستخدام خادم Node.js، حاوية Docker، أو التصدير الثابت. قمنا بإعادة هيكلة وثائق الاستضافة الذاتية حول:

• متغيرات بيئة التشغيل
• تكوين ذاكرة التخزين المؤقت المخصصة لـ ISR
• تحسين الصور المخصص
• البرمجيات الوسيطة (Middleware)

مع Next.js 14.1، قمنا أيضًا بتحسين تقديم معالجات ذاكرة التخزين المؤقت المخصصة للتجديد الثابت التدريجي وذاكرة التخزين المؤقت للبيانات الأكثر دقة لموجه التطبيق:

module.exports = {
  cacheHandler: require.resolve('./cache-handler.js'),
  cacheMaxMemorySize: 0, // تعطيل التخزين المؤقت في الذاكرة الافتراضي
};

يعد استخدام هذا التكوين مهمًا عند الاستضافة الذاتية عند استخدام منصات تنظيم الحاويات مثل Kubernetes، حيث سيكون لكل نسخة (pod) نسخة من ذاكرة التخزين المؤقت. سيسمح لك استخدام معالج ذاكرة التخزين المؤقت المخصص بضمان الاتساق عبر جميع النسخ التي تستضيف تطبيق Next.js الخاص بك.

على سبيل المثال، يمكنك حفظ القيم المخزنة مؤقتًا في أي مكان، مثل Redis أو Memcached. نود أن نشكر @neshca على محول معالج ذاكرة التخزين المؤقت لـ Redis والمثال المقدم.

تحسينات Turbopack

نواصل التركيز على موثوقية وأداء التطوير المحلي لـ Next.js:

• الموثوقية: نجاح Turbopack في اجتياز مجموعة اختبارات تطوير Next.js بالكامل واستخدامه في تطبيقات Vercel
• الأداء: تحسين أوامر الترجمة الأولية لـ Turbopack وأوقات التحديث السريع (Fast Refresh)
• استخدام الذاكرة: تحسين استخدام الذاكرة في Turbopack

نخطط لتثبيت next dev --turbo في إصدار قادم مع بقائه اختياريًا.

الموثوقية

Next.js مع Turbopack يجتاز الآن 5,600 اختبار تطوير (94%)، بزيادة 600 اختبار منذ آخر تحديث. يمكنك متابعة التقدم على areweturboyet.com.

واصلنا استخدام next dev --turbo على جميع تطبيقات Next.js الخاصة بـ Vercel، بما في ذلك vercel.com و v0.dev. جميع المهندسين العاملين على هذه التطبيقات يستخدمون Turbopack يوميًا.

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

الأداء

بالنسبة لـ vercel.com، وهو تطبيق Next.js كبير، لاحظنا:

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

في v0.dev، حددنا فرصة لتحسين طريقة اكتشاف وتجميع مكونات React للعميل في Turbopack - مما أدى إلى أسرع بنسبة تصل إلى 61.5% في وقت الترجمة الأولي. لوحظ هذا التحسن في الأداء أيضًا في vercel.com.

تحسينات مستقبلية

يحتوي Turbopack حاليًا على تخزين مؤقت في الذاكرة، مما يحسن أوقات الترجمة التدريجية للتحديث السريع (Fast Refresh).

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

تحسينات تجربة المطور

تحسين رسائل الأخطاء والتحديث السريع

نحن نعلم مدى أهمية رسائل الأخطاء الواضحة لتجربة التطوير المحلي. قمنا بعدد من الإصلاحات لتحسين جودة مسارات المكدس ورسائل الأخطاء التي تراها عند تشغيل next dev.

• الأخطاء التي كانت تعرض سابقًا أخطاء المجمع مثل webpack-internal تعرض الآن بشكل صحيح الكود المصدري للخطأ والملف المتأثر.
• بعد رؤية خطأ في مكون العميل، ثم إصلاح الخطأ في محررك، لم يكن التحديث السريع (Fast Refresh) يزيل شاشة الخطأ. كان يتطلب إعادة تحميل كاملة. أصلحنا عددًا من هذه الحالات. على سبيل المثال، محاولة تصدير metadata من مكون العميل.

على سبيل المثال، كانت هذه رسالة خطأ سابقة:

مثال على خطأ من استدعاء fetch في Next.js 14.

Next.js 14.1 قام بتحسين هذا إلى:

أخطاء استدعاءات fetch أثناء العرض تعرض الآن الكود المصدري للخطأ والملف المتأثر.

window.history.pushState و window.history.replaceState

يسمح موجه التطبيق الآن باستخدام الطرق الأصلية pushState و replaceState لتحديث سجل المتصفح دون إعادة تحميل الصفحة.

تكامل استدعاءات pushState و replaceState مع موجه تطبيق Next.js، مما يسمح لك بالمزامنة مع usePathname و useSearchParams.

هذا مفيد عند الحاجة لتحديث عنوان URL فورًا عند حفظ الحالة مثل الفلاتر، ترتيب الفرز، أو أي معلومات أخرى يرغب في استمرارها عبر إعادة التحميل.

'use client';
 
import { useSearchParams } from 'next/navigation';
 
export default function SortProducts() {
  const searchParams = useSearchParams();
 
  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set('sort', sortOrder);
    window.history.pushState(null, '', `?${params.toString()}`);
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>ترتيب تصاعدي</button>
      <button onClick={() => updateSorting('desc')}>ترتيب تنازلي</button>
    </>
  );
}

تعلم المزيد حول استخدام واجهة برمجة تطبيق History الأصلية مع Next.js.

تسجيل ذاكرة التخزين المؤقت للبيانات

لتحسين إمكانية مراقبة البيانات المخزنة مؤقتًا في تطبيق Next.js عند تشغيل next dev، قمنا بإدخال العديد من التحسينات على خيار تكوين التسجيل.

يمكنك الآن عرض ما إذا كان هناك HIT أو SKIP في ذاكرة التخزين المؤقت وعنوان URL الكامل الذي تم طلبه:

GET / 200 in 48ms
 ✓ Compiled /fetch-cache in 117ms
 GET /fetch-cache 200 in 165ms
  │ GET https://api.vercel.app/products/1 200 in 14ms (cache: HIT)
 ✓ Compiled /fetch-no-store in 150ms
 GET /fetch-no-store 200 in 548ms
  │ GET https://api.vercel.app/products/1 200 in 345ms (cache: SKIP)
  │  │  Cache missed reason: (cache: no-store)

يمكن تفعيل هذا من خلال next.config.js:

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

دعم next/image لـ <picture> والتوجيه الفني

مكون الصورة في Next.js يدعم الآن حالات استخدام أكثر تقدمًا عبر getImageProps() (مستقر) والذي لا يتطلب استخدام <Image> مباشرة. وهذا يشمل:

• العمل مع background-image أو image-set
• العمل مع canvas context.drawImage() أو new Image()
• العمل مع <picture> واستعلامات الوسائط لتنفيذ التوجيه الفني أو صور الوضع الفاتح/الداكن

import { getImageProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImageProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImageProps({ ...common, src: '/light.png' });
 
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

تعلم المزيد عن getImageProps().

المسارات المتوازية والمقاطعة

في Next.js 14.1، قمنا بإدخال 20 تحسينًا للمسارات المتوازية والمقاطعة.

خلال الإصدارين السابقين، ركزنا على تحسين أداء وموثوقية Next.js. استطعنا الآن إدخال العديد من التحسينات على المسارات المتوازية والمسارات المقاطعة بناءً على ملاحظاتكم. تحديدًا، أضفنا دعمًا لمسارات catch-all وإجراءات الخادم.

• المسارات المتوازية تتيح لك عرض صفحة واحدة أو أكثر في نفس التخطيط بشكل متزامن أو مشروط. للأقسام الديناميكية للغاية في التطبيق، مثل لوحات التحكم والتغذيات في المواقع الاجتماعية، يمكن استخدام المسارات المتوازية لتنفيذ أنماط توجيه معقدة.
• المسارات المقاطعة تتيح لك تحميل مسار من جزء آخر من تطبيقك داخل التخطيط الحالي. على سبيل المثال، عند النقر على صورة في تغذية، يمكنك عرض الصورة في نافذة مشروطة، تغطي التغذية. في هذه الحالة، يقوم Next.js بمقاطعة مسار /photo/123، وإخفاء عنوان URL، ووضعه فوق /feed.

تعلم المزيد عن المسارات المتوازية والمسارات المقاطعة أو شاهد مثالًا.

تحسينات أخرى

منذ الإصدار 14.0، قمنا بإصلاح عدد من الأخطاء التي حظيت بتصويت عالٍ من المجتمع.

كما قمنا مؤخرًا بنشر مقاطع فيديو تشرح التخزين المؤقت وبعض الأخطاء الشائعة مع موجه التطبيق التي قد تجدها مفيدة.

• [وثائق] وثائق جديدة حول إعادة التوجيه
• [وثائق] وثائق جديدة حول الاختبار
• [وثائق] وثائق جديدة مع قائمة مراجعة الإنتاج
• [ميزة] إضافة مكون <GoogleAnalytics /> إلى next/third-parties (الوثائق)
• [تحسين] create-next-app أصبح الآن أصغر حجمًا وأسرع في التثبيت (PR)
• [تحسين] المسارات المتداخلة التي تسبب أخطاء يمكن الآن التقاطها بواسطة global-error (PR)
• [تحسين] redirect تحترم الآن basePath عند استخدامها في إجراء خادم (PR)
• [تحسين] إصلاح next/script و beforeInteractive عند استخدامها مع موجه التطبيق (PR)
• [تحسين] تحويل @aws-sdk و lodash تلقائيًا لبدء أسرع للمسارات (PR)
• [تحسين] إصلاح وميض المحتوى غير المنسق مع next dev و next/font (PR)
• [تحسين] نقل أخطاء notFound بعد حدود خطأ القطعة (PR)
• [تحسين] إصلاح تقديم الملفات العامة من نطاقات محلية مع i18n لموجه الصفحات (PR)
• [تحسين] خطأ إذا تم تمرير قيمة revalidate غير صالحة (PR)
• [تحسين] إصلاح مشاكل المسار على أجهزة لينكس عند إنشاء البناء على ويندوز (PR)
• [تحسين] إصلاح التحديث السريع / HMR عند استخدام تطبيق متعدد المناطق مع basePath (PR)
• [تحسين] تحسين الإغلاق الأنيق من إشارات الإنهاء (PR)
• [تحسين] تصادم المسارات المشروطة عند المقاطعة من مسارات مختلفة (PR)
• [تحسين] إصلاح المسارات المقاطعة عند استخدام تكوين basePath (PR)
• [تحسين] عرض تحذير عندما يؤدي فقدان فتحة متوازية إلى 404 (PR)
• [تحسين] تحسين المسارات المقاطعة عند استخدامها مع مسارات catch-all (PR)
• [تحسين] تحسين المسارات المقاطعة عند استخدامها مع revalidatePath (PR)
• [تحسين] إصلاح استخدام فتحات @children مع المسارات المتوازية (PR)
• [تحسين] إصلاح TypeError عند استخدام المعلمات مع المسارات المتوازية (PR)
• [تحسين] إصلاح تطبيع مسار catch-all للفتحات المتوازية الافتراضية (PR)
• [تحسين] إصلاح عرض المسارات المتوازية في ملخص next build (PR)
• [تحسين] إصلاح معلمات المسار عند استخدام المسارات المقاطعة (PR)
• [تحسين] تحسين المسارات المتوازية/المقاطعة المتداخلة بعمق (PR)
• [تحسين] إصلاح 404 مع المسارات المقاطعة المزدوجة مع مجموعات المسار (PR)
• [تحسين] إصلاح المسارات المتوازية مع إجراءات الخادم / إعادة التحقق من ذاكرة التوجيه المؤقتة (PR)
• [تحسين] إصلاح استخدام rewrites مع مسار مقاطع (PR)
• [تحسين] إجراءات الخادم تعمل الآن من مكتبات الطرف الثالث (PR)
• [تحسين] يمكن الآن استخدام Next.js داخل حزمة ESM (PR)
• [تحسين] تحسينات ملفات البرميل للمكتبات مثل Material UI (PR)
• [تحسين] ستفشل عمليات البناء الآن على الاستخدام غير الصحيح لـ useSearchParams بدون Suspense (PR)

المساهمون

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

هذا الإصدار قدمه لكم:

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

ومساهمات: @OlehDutchenko، @eps1lon، @ebidel، @janicklas-ralph، @JohnPhamous، @chentsulin، @akawalsky، @BlankParticle، @dvoytenko، @smaeda-ks، @kenji-webdev، @rv-david، @icyJoseph، @dijonmusters، @A7med3bdulBaset، @jenewland1999، @mknichel، @kdy1، @housseindjirdeh، @max-programming، @redbmk، @SSakibHossain10، @jamesmillerburgess، @minaelee، @officialrajdeepsingh، @LorisSigrist، @yesl-kim، @StevenKamwaza، @manovotny، @mcexit، @remcohaszing، @ryo-manba، @TranquilMarmot، @vinaykulk621، @haritssr، @divquan، @IgorVaryvoda، @LukeSchlangen، @RiskyMH، @ash2048، @ManuWeb3، @msgadi، @dhayab، @ShahriarKh، @jvandenaardweg، @DestroyerXyz، @SwitchBladeAK، @ianmacartney، @justinh00k، @tiborsaas، @ArianHamdi، @li-jia-nan، @aramikuto، @jquinc30، @samcx، @Haosik، @AkifumiSato، @arnabsen، @nfroidure، @clbn، @siddtheone، @zbauman3، @anthonyshew، @alexfradiani، @CalebBarnes، @adk96r، @pacexy، @hichemfantar، @michaldudak، @redonkulus، @k-taro56، @mhughdo، @tknickman، @shumakmanohar، @vordgi، @hamirmahal، @gaspar09، @JCharante، @sjoerdvanBommel، @mass2527، @N-Ziermann، @tordans، @davidthorand، @rmathew8-gh، @chriskrogh، @shogunsea، @auipga، @SukkaW، @agustints، @OXXD، @clarencepenz، @better-salmon، @808vita، @coltonehrman، @tksst، @hugo-syn، @JakobJingleheimer، @Willem-Jaap، @brandonnorsworthy، @jaehunn، @jridgewell، @gtjamesa، @mugi-uno، @kentobento، @vivianyentran، @empflow، @samennis1، @mkcy3، @suhaotian، @imevanc، @d3lm، @amannn، @hallatore، @Dylan700، @mpsq، @mdio، @christianvuerings، @karlhorky، @simonhaenisch، @olci34، @zce، @LavaToaster، @rishabhpoddar، @jirihofman، @codercor، @devjiwonchoi، @JackieLi565، @thoushif، @pkellner، @jpfifer، @quisido، @tomfa، @raphaelbadia، @j9141997، @hongaar، @MadCcc، @luismulinari، @dumb-programmer، @nonoakij، @franky47، @robbertstevens، @bryndyment، @marcosmartini، @functino، @Anisi، @AdonisAgelis، @seangray-dev، @prkagrawal، @heloineto، @kn327، @ihommani، @MrNiceRicee، @falsepopsky، @thomasballinger، @tmilewski، @Vadman97، @dnhn، @RodrigoTomeES، @sadikkuzu، @gffuma، @Schniz، @joulev، @Athrun-Judah، @rasvanjaya21، @rashidul0405، @nguyenbry، @Mwimwii، @molebox، @mrr11k، @philwolstenholme، @IgorKowalczyk، @Zoe-Bot، @HanCiHu، @JackHowa، @goncy، @hirotomoyamada، @pveyes، @yeskunall، @ChendayUP، @hmaesta، @ajz003، @its-kunal، @joelhooks، @blurrah، @tariknh، @Vinlock، @Nayeem-XTREME، @aziyatali، @aspehler، و @moka-ayumu.