Next.js 13.5

يحسن Next.js 13.5 أداء وموثوقية التطوير المحلي مع:

• 22% أسرع في بدء تشغيل الخادم المحلي: التكرار بشكل أسرع مع موجه التطبيق وموجه الصفحات
• 29% أسرع في تحديث HMR (التحديث السريع): لتكرارات أسرع عند حفظ التغييرات
• 40% استهلاك أقل للذاكرة: تم قياسه عند تشغيل next start
• استيراد الحزم المحسن: تحديثات أسرع عند استخدام مكتبات الأيقونات والمكونات الشائعة
• تحسينات next/image: دعم <picture>، توجيه فني، ووضع الظلام
• وأكثر من 438 خطأ تم إصلاحها!

قم بالترقية اليوم وسجل في Next.js Conf في 26 أكتوبر:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

تحسين وقت بدء التشغيل والتحديث السريع

نحن متحمسون لرؤية تبني مستمر لموجه التطبيق، الذي ينمو الآن بنسبة 80% شهريًا عند النظر إلى أفضل 10 ملايين أصل تم زحفها بواسطة HTTP Archive.

منذ Next.js 13.4، كان تركيزنا على تحسين الأداء والموثوقية لتطبيقات موجه التطبيق. بمقارنة 13.4 مع 13.5، رأينا التحسينات التالية على تطبيق جديد:

• 22% أسرع في بدء تشغيل الخادم المحلي
• 29% أسرع في تحديث HMR (التحديث السريع)
• 40% أقل في استهلاك الذاكرة

تمكنا من تحقيق هذه الزيادة في الأداء من خلال تحسينات مثل:

• القيام بعمل أقل عن طريق التخزين المؤقت أو تقليل العمليات البطيئة
• تحسين عمليات نظام الملفات المكلفة
• اجتياز شجرة تدريجي أفضل أثناء التجميع
• نقل المكالمات المتزامنة غير الضرورية لتكون كسولة
• تكوين مكتبات الأيقونات الكبيرة تلقائيًا

أبلغ مستخدم Next.js Lattice عن 87-92% تجميع أسرع في اختباراتهم.

بينما نواصل التكرار وتحسين أداء الحزمة الحالي، نحن أيضًا نعمل على Turbopack (Beta) بالتوازي لزيادة الأداء أكثر. مع 13.5، يدعم next dev --turbo الآن المزيد من الميزات.

استيراد الحزم المحسن

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

سابقًا، أضفنا دعمًا لـ modularizeImports، مما يتيح لك تكوين كيفية حل الاستيرادات عند استخدام هذه المكتبات. في 13.5، قمنا باستبدال هذا الخيار بـ optimizePackageImports، الذي لا يتطلب منك تحديد تعيين الاستيرادات، ولكن بدلاً من ذلك سيقوم بتحسين الاستيرادات تلقائيًا لك.

المكتبات مثل @mui/icons-material، @mui/material، date-fns، lodash، lodash-es، ramda، react-bootstrap، @headlessui/react، @heroicons/react، و lucide-react يتم تحسينها الآن تلقائيًا، مع تحميل الوحدات التي تستخدمها فقط، مع الحفاظ على راحتك في كتابة عبارات import مع العديد من الصادرات المسماة.

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

تحسينات next/image

بناءً على ملاحظات المجتمع، أضفنا وظيفة تجريبية جديدة unstable_getImgProps() لدعم حالات الاستخدام المتقدمة دون استخدام مكون <Image> مباشرة، بما في ذلك:

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

import { unstable_getImgProps as getImgProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'بطل', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImgProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImgProps({ ...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>
  );
}

بالإضافة إلى ذلك، يدعم الآن placeholder تقديم data:image/ عشوائي لصور العنصر النائب التي لا يجب طمسها (عرض توضيحي).

تعلم المزيد عن next/image في وثائقنا.

تحسينات أخرى

منذ 13.4.0، أصلحنا أكثر من 438 خطأ وقمنا بتحسينات مختلفة تشمل:

• [وثائق] وثائق جديدة حول النماذج والتحولات
• [وثائق] وثائق جديدة حول المكونات من جانب الخادم و المكونات من جانب العميل
• [وثائق] وثائق جديدة حول سياسة أمان المحتوى والقيم الفريدة
• [وثائق] وثائق جديدة حول التخزين المؤقت و إعادة التحقق
• [ميزة] useParams و useSearchParams من next/navigation تعمل الآن في موجه الصفحات للتبني التدريجي
• [ميزة] دعم scroll: false على router.push / router.replace
• [ميزة] دعم scroll={false} على next/link
• [ميزة] دعم HTTPS للتطوير: next dev --experimental-https
• [ميزة] تمت إضافة دعم لـ cookies().has() (وثائق)
• [ميزة] تمت إضافة دعم لأسماء مضيف IPv6
• [ميزة] تمت إضافة دعم لـ Yarn PnP مع موجه التطبيق
• [ميزة] تمت إضافة دعم لـ redirect() في إجراءات الخادم
• [ميزة] تمت إضافة دعم لاستخدام Bun مع إنشاء المشاريع: bunx create-next-app (وثائق)
• [ميزة] دعم وضع المسودة للاستخدام داخل Middleware و Edge Runtime
• [ميزة] cookies() و headers() مدعومة الآن داخل Middleware
• [ميزة] واجهة برمجة التطبيقات Metadata تدعم الآن summary_large_image في بطاقات تويتر
• [ميزة] RedirectType مصدر الآن من next/navigation
• [ميزة] تمت إضافة وضع اختبار تجريبي لـ Playwright (وثائق)
• [تحسين] إعادة هيكلة next start لمعالجة 1062% طلبات/ثانية أكثر
• [تحسين] تحسين داخليات Next.js لتحسين بدء التشغيل البارد (أسرع بنسبة تصل إلى 40%، تم اختباره على Vercel)
• [تحسين] دعم أفضل لـ Jest مع موجه التطبيق (PR)
• [تحسين] إعادة تصميم إخراج next dev (PR)
• [تحسين] إجراءات الخادم تعمل الآن مع المسارات الثابتة بالكامل (بما في ذلك إعادة التحقق من البيانات مع ISR)
• [تحسين] إجراءات الخادم لا تعيق الآن التنقل بين المسارات
• [تحسين] إجراءات الخادم لا يمكنها الآن تشغيل إجراءات متزامنة متعددة
• [تحسين] إجراءات الخادم التي تستدعي redirect() تدفع الآن إلى مكدس التاريخ بدلاً من استبدال الإدخال الحالي لضمان عمل زر الرجوع
• [تحسين] إجراءات الخادم تضيف رأس cache-control no-cache, no-store لمنع التخزين المؤقت للمتصفح
• [تحسين] إصلاح خطأ حيث يمكن استدعاء إجراءات الخادم مرتين بعد التنقل
• [تحسين] تحسين دعم Emotion CSS مع مكونات الخادم
• [تحسين] دعم scroll-behavior: smooth لتغييرات عنوان URL الهاش
• [تحسين] تمت إضافة polyfill لـ Array.prototype.at في جميع المتصفحات
• [تحسين] إصلاح حالة سباق في ذاكرة التخزين المؤقت لـ next dev عند التعامل مع طلبات متوازية متعددة
• [تحسين] إخراج fetch في وحدة التحكم يظهر الآن الطلبات التي تخطت التخزين المؤقت مع cache: SKIP
• [تحسين] usePathname يزيل الآن basePath بشكل صحيح
• [تحسين] next/image يقوم الآن بتحميل الصور مسبقًا بشكل صحيح في موجه التطبيق
• [تحسين] not-found لا يقوم الآن بعرض تخطيط الجذر مرتين
• [تحسين] يمكن الآن استنساخ NextRequest (أي new NextRequest(request))
• [تحسين] app/children/page.tsx يعمل الآن بشكل صحيح للمسارات الحرفية /children
• [تحسين] سياسة أمان المحتوى تدعم الآن nonce للنصوص البرمجية الممهدة مسبقًا
• [تحسين] استخدام redirect من next/navigation يدعم الآن basePath
• [تحسين] إصلاح process.env غير المتاح أثناء العرض في وضع output: 'standalone'
• [تحسين] تحسين رسالة الخطأ عند استخدام تصدير ثابت مع ميزات غير مدعومة
• [تحسين] تحسين تنفيذ readdir العودي (~3x أسرع)
• [تحسين] إصلاح fallback: false مع شرائح المسار الديناميكي التي كانت تسبب تعليق الطلبات
• [تحسين] إصلاح خطأ حيث تم تمرير signal إلى طلبات إعادة التحقق، مما تسبب في فشلها عندما تم إلغاء الطلب بالفعل
• [تحسين] إزالة استطلاع fetch على صفحة 404 لصالح أحداث websocket، لمنع إعادة التحميل غير الضرورية عند تشغيل next dev
• [تحسين] performance.measure لا يمكن أن يسبب الآن عدم تطابق في الترطيب
• [تحسين] إصلاح الحالات حيث يمكن أن يحدث إعادة تحميل كامل غير متوقع عند تحرير pages/_app
• [تحسين] ImageResponse يمتد الآن Response لتحسين التحقق من النوع (PR)
• [تحسين] pages لا يظهر الآن عندما لا يكون هناك إخراج pages في next build
• [تحسين] إصلاح تجاهل skipTrailingSlashRedirect في <Link>
• [تحسين] إصلاح تكرار مسارات البيانات الوصفية الديناميكية في وضع التطوير

المساهمون

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

تم تقديم هذا الإصدار بواسطة:

• فريق Next.js: أندرو، بالاز، جياتشي، جيمي، جي جي، جوش، سيبيستيان، شو، ستيفن، تيم، وايات، و زاك.
• فريق Turbopack: دوني، جاستن، ليا، مايا، OJ، توبياس، و ويل.

ومساهمات: @opnay، @vinaykulk621، @goguda، @coreyleelarson، @bencmbrook، @cramforce، @williamli، @stefanprobst، @feugy، @Kikobeats، @dvoytenko، @MaxLeiter، @devjiwonchoi، @lacymorrow، @kylemcd، @tibi1220، @iamarpitpatidar، @pythagoras-yamamoto، @alexkirsz، @jsteele-stripe، @tknickman، @gaojude، @janicklas-ralph، @ericfennis، @JohnAdib، @MiLk، @delbaoliveira، @leerob، @LuudJanssen، @lucasconstantino، @davecarlson، @colinhacks، @jantimon، @Banbarashik، @ForsakenHarmony، @arturbien، @gnoff، @hsrvms، @DuCanhGH، @tim-hanssen، @Aryan9592، @rishabhpoddar، @Lantianyou، @joulev، @AkifumiSato، @trigaten، @HurSungYun، @DevLab2425، @SukkaW، @daniel-web-developer، @ky1ejs، @wyattjoh، @ShaunFerris، @syedtaqi95، @Heidar-An، @Jeffrey-Zutt، @Ryan-Dia، @steppefox، @hiro0218، @rjsdnql123، @fgiuliani، @steven-tey، @AntoineBourin، @adamrhunter، @darshanjain-entrepreneur، @s0h311، @djreillo، @dijonmusters، @cassidoo، @anonrig، @gfgabrielfranca، @Bitbbot، @BrennanColberg، @Nick-Mazuk، @thomasballinger، @lucgagan، @nroland013، @SonMooSans، @jenewland1999، @thorwebdev، @jyunhanlin، @Gnadhi، @yagogmaisp، @carlos-menezes، @ryo-manba، @vamcs، @matepapp، @SleeplessOne1917، @ecklf، @karlhorky، @starunaway، @FernandVEYRIER، @Terro216، @anthonyshew، @suhaotian، @simonswiss، @feikerwu، @lubakravche، @masnormen، @bottxiang، @mhmdrioaf، @tyler-lutz، @vincenthongzy، @yigithanyucedag، @doinki، @danger-ahead، @bre30kra69cs، @Yash-Singh1، @krmeda، @bigyanse، @2-NOW، @Mingyu-Song، @morganfeeney، @aralroca، @nickmccurdy، @adamjmcgrath، @angel1254mc، @cxa، @ibash، @mohanraj-r، @kevinmitch14، @iaurg، @steebchen، @Cow258، @charlesbdudley، @tyhopp، @Drblessing، @milovangudelj، @jacobsfletch، @JoshuaKGoldberg، @zignis، @ChristianIvicevic، @mrxbox98، @oliviertassinari، @fsansalvadore، @tvthatsme، @dvakatsiienko، @brunoeduardodev، @sonam-serchan، @vicsantizo، @leodr، @wiscaksono، @hustLer2k، @joshuabaker، @shozibabbas، @omarhoumz، @jamespearson، @tristndev، @AldeonMoriak، @manovotny، @mirismaili، @SuttonJack، @jeremydouglas، @JanCizmar، @mltsy، @WilderDev، @Guilleo03، @Willem-Jaap، @escwxyz، @wiredacorn، @Ethan-Arrowood، @BaffinLee، @greatSumini، @ciruz، @kijikunnn، @DustinsCode، @riqwan، @joostdecock، @nikolovlazar، @Bowens20832، @JohnAlbin، @gidgudgod، @maxproske، @dunklesToast، @yyuemii، @mPaella، @mknichel، @niko20، @mkcy3، @valentinpolitov، @smaeda-ks، @keyz، @Schniz، @koba04، @jiwooIncludeJeong، @ethanmick، @didemkkaslan، @itsmingjie، @v1k1، @thepatrick00، @taylorbryant، @kvnang، @alainkaiser، @simPod، @svarunid، @pauek، @lycuid، @MarkAtOmniux، @darshkpatel، @johnta0، @devagrawal09، @ibrahemid، @JesseKoldewijn، @javivelasco، @05lazy، @alexanderbluhm، @Fonger، @souporserious، @DevEsteves، @sanjaiyan-dev، @g12i، @cesarkohl، @josh، @li-jia-nan، @gabschne، @akd-io، @runjuu، @jocarrd، @nnnnoel، @ferdingler، و @ikryvorotenko