الإصدار 12.1 من Next.js | Next.js العربية

نحن متحمسون للإعلان عن إحدى أكثر الميزات المطلوبة في Next.js 12.1:

تجديد ثابت تدريجي عند الطلب (بيتا): قم بتجديد الصفحات التي تستخدم getStaticProps فورًا.
دعم موسع لـ SWC: styled-components، Relay، والمزيد.
إضافة next/jest: دعم جست (Jest) بدون تكوين باستخدام SWC.
تصغير أسرع مع SWC (نسخة مرشحة): تصغير أسرع بـ 7 مرات من Terser.
تحسينات الاستضافة الذاتية: صور Docker أصغر بنسبة ~80%.
React 18 ومكونات الخادم (ألفا): تحسينات في الاستقرار والدعم.
استبيان المطورين: ساعدنا في تحسين Next.js بملاحظاتك.

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

تجديد ثابت تدريجي عند الطلب (بيتا)

يقدم Next.js الآن دالة unstable_revalidate() تتيح لك تجديد صفحات فردية تستخدم getStaticProps. كانت هذه من أكثر الميزات المطلوبة منذ تقديمنا التجديد الثابت التدريجي (ISR) في Next.js 9.5.

منذ إصدار ISR، رأينا شركات مثل Tripadvisor، Parachute، HashiCorp وغيرها تحسن بشكل كبير أوقات البناء مع الحفاظ على أداء مذهل. ومع ذلك، سمعنا ملاحظاتكم حول التجديدات القائمة على الفترات الزمنية ونحن متحمسون لتوفير المزيد من المرونة.

حاليًا، إذا قمت بتعيين وقت revalidate بقيمة 60، سيرى جميع الزوار نفس النسخة المولدة من موقعك لمدة دقيقة واحدة. الطريقة الوحيدة لإبطال ذاكرة التخزين المؤقت كانت من خلال زيارة أحد للصفحة بعد انتهاء الدقيقة. يمكنك الآن إبطال ذاكرة التخزين المؤقت لـ Next.js يدويًا لصفحة معينة عند الطلب.

هذا يجعل تحديث موقعك أسهل عندما:

يتم إنشاء محتوى جديد أو تحديثه في نظام إدارة المحتوى (CMS) الخاص بك
تتغير بيانات التجارة الإلكترونية (السعر، الوصف، الفئة، التقييمات، إلخ.)

pages/api/revalidate.js

export default async function handler(req, res) {
  // تحقق من السر للتأكد من أن هذا طلب صالح
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'رمز غير صالح' });
  }
 
  try {
    await res.unstable_revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // في حالة وجود خطأ، سيستمر Next.js
    // في عرض آخر صفحة تم توليدها بنجاح
    return res.status(500).send('خطأ في التجديد');
  }
}

داخل getStaticProps، لا تحتاج إلى تحديد revalidate لاستخدام التجديد عند الطلب. إذا تم حذف revalidate، سوف يستخدم Next.js القيمة الافتراضية false (لا تجديد) وسيجدد الصفحة فقط عند الطلب عند استدعاء unstable_revalidate().

يعمل التجديد الثابت التدريجي مع أي مزود يدعم واجهة برمجة تطبيقات بناء Next.js (next build). بدءًا من اليوم عند النشر على Vercel، ينتشر التجديد عند الطلب عالميًا في ~300 مللي ثانية عند دفع الصفحات إلى الحافة.

شاهد عرضنا التوضيحي لرؤية التجديد عند الطلب في العمل وتقديم الملاحظات. كما أنشأت Svix (ويب هوكس جاهزة للمؤسسات) و Clerk (المصادقة) عرضًا توضيحيًا للتجديد الثابت التدريجي عند الطلب.

تحسين دعم SWC

نريد جعل كل تطبيق Next.js يُبنى بشكل أسرع للإنتاج ويحصل على ملاحظات فورية في التطوير المحلي. قدم Next.js 12 مُجمّعًا جديدًا مبنيًا على Rust يستفيد من التجميع الأصلي.

مع الإصدار 12.1، أضفنا دعمًا لمُجمّع Next.js لـ:

مع إضافة التحويلات الستة المذكورة أعلاه، قمنا الآن بنقل أكثر إضافات Babel شيوعًا إلى Rust باستخدام المُجمّع الجديد. إذا كنت ترغب في رؤية إضافات أخرى، أخبرنا في المناقشة. علاوة على ذلك، نحن نعمل على نظام لإضافات WebAssembly عالية الأداء مُمكّن من خلال SWC.

إضافة جست (Jest) بدون تكوين

يقوم Next.js الآن بتكوين جست (Jest) تلقائيًا لك (next/jest) باستخدام مُجمّع Next.js المبني على Rust لتحويل الملفات، بما في ذلك:

المحاكاة التلقائية لملفات الأنماط (.css، .module.css، ومتغيرات .scss) واستيرادات الصور
تحميل .env (وجميع المتغيرات) إلى process.env
تجاهل node_modules من تحويلات وحل الاختبارات
تجاهل .next من حل الاختبارات
تحميل next.config.js للإشارات التي تمكن تحويلات مُجمّع Next.js

اطلع على الوثائق لمعرفة المزيد أو ابدأ من مثال جست (Jest) الخاص بنا.

تصغير أسرع مع SWC

مع Next.js 12، قدمنا التصغير باستخدام SWC كجزء من مُجمّع Next.js. أظهرت النتائج المبكرة أنه أسرع بـ 7 مرات من Terser. أصبح التصغير باستخدام SWC الآن في نسخة مرشحة (RC) مع 12.1 وسيصبح الافتراضي في 12.2.

يمكنك اختيار استخدام SWC للتصغير في next.config.js:

next.config.js

module.exports = {
  swcMinify: true,
};

شاركنا ملاحظاتك في المناقشة.

تحسين أسرع للصور

تم تحديث واجهة برمجة التطبيقات المدمجة لتحسين الصور لدعم نفس النمط مثل صفحات ISR، حيث يتم تقديم الصور قديمة وتجديدها في الخلفية (المعروف أيضًا باسم stale-while-revalidate).

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

تحسينات الاستضافة الذاتية لـ Next.js

يمكن لـ Next.js الآن إنشاء مجلد standalone تلقائيًا الذي ينسخ فقط الملفات الضرورية لنشرات الإنتاج. أدى هذا إلى صور Docker أصغر بنسبة ~80% لتطبيقات Next.js المستضافة ذاتيًا.

لاستخدام هذه النسخ التلقائي، يمكنك تمكينه في next.config.js:

next.config.js

module.exports = {
  experimental: {
    outputStandalone: true,
  },
};

سيؤدي هذا إلى إنشاء مجلد في .next/standalone يمكن نشره بمفرده دون تثبيت node_modules.

اطلع على الوثائق أو ابدأ من مثال Docker. لدينا الآن أيضًا مثال Docker متعدد البيئات مع دعم لتحميل ملفات .env مختلفة بناءً على البيئة.

React 18، مكونات الخادم، وبث SSR (ألفا)

كما ظهر في Next.js Conf، كنا نعمل على جلب React 18، تعليق جانب الخادم، بث SSR، وفي النهاية مكونات الخادم إلى Next.js.

مكونات الخادم هي ميزة جديدة في React تتيح لك تقليل حجم حزمة JavaScript عن طريق فصل كود الخادم والعميل. تسمح مكونات الخادم للمطورين ببناء تطبيقات تمتد بين الخادم والعميل، تجمع بين التفاعل الغني للتطبيقات من جانب العميل والأداء المحسن للعرض التقليدي من جانب الخادم.

للمطورين الذين يتابعون مسار مكونات الخادم من ألفا إلى بيتا في Next.js، إليك بعض التحديثات الأخيرة:

نحن نعمل على تمكينك من تشغيل تطبيق Next.js بالكامل معروضًا من جانب الخادم على Edge. يمكنك اختيار الصفحات التي يجب أن تختار وقت تشغيل Edge، بحيث يمكنك الهجرة تدريجيًا للصفحات من Node.js عندما تكون جاهزًا.

سننشر مشاركة أخرى تتعمق أكثر في وقت تشغيل Edge قريبًا. تم تحديث عرضينا التوضيحيين (next-server-components و next-rsc-demo) بأحدث التغييرات.

إصلاحات وتحسينات أخرى

استخدام <a> مع target="blank" لم يعد يظهر تحذيرًا لاستخدام next/link مع ESLint.
ملفات .d.ts لم تعد تعتبر صفحات.
document.title يأخذ الآن الأولوية على h1 عند الإعلان عن تغييرات الصفحة لقارئات الشاشة.
إنشاء pages/index/[...dynamic].js يعمل الآن، وهو ما لم يكن ممكنًا سابقًا بسبب كون index كلمة محجوزة.
عند استخدام dynamic(() => import('./some-component'), { ssr: false }) سيتم إزالة الاستيراد تلقائيًا من كود الخادم.
لإنشاء حجم تثبيت أصغر وتحسين الأمان، نعمل على تجميع المزيد من التبعيات مسبقًا. كانت أحدث إضافة هي node-fetch.
تحسينات لتحديث سريع عند استخدام البرمجيات الوسيطة.
دعم ESLint 8 مع تكامل ESLint المدمج.
تمت ترقية styled-jsx إلى الإصدار 5.0، بما في ذلك روابط أخطاء جديدة مفيدة لجميع أخطاء تجميع styled-jsx.
وقت تشغيل Edge: دعم لـ AbortController و AbortSignal
وقت تشغيل Edge: إضافة CryptoKey و globalThis.CryptoKey.
تطبيقات Next.js الكبيرة تشهد تحسينات بنسبة ~60% في أوقات التحديث السريع مع التحسينات الأخيرة (أكثر من 1,000 وحدة يتم إعادة تحميلها).
يتم الآن عرض إشعار إذا فشل التحديث السريع وتسبب في إعادة تحميل كامل للصفحة.
يتم الآن تخطي الإعلان عن تحميل الصفحة الأولي بشكل صحيح عند استخدام الوضع الصارم لـ React 18.
قمنا بتقليل عدد المشكلات المفتوحة بما يقارب 300 في مستودع Next.js مقارنةً بديسمبر 2021 (تم حل ما يقارب 1000 مشكلة).

استبيان مطوري Next.js

شارك ملاحظاتك وساعدنا في تحسين Next.js من خلال أول استبيان للمطورين.

هناك جزأان لهذا الاستبيان: استبيان سريع من ثمانية أسئلة واستبيان موسع يتعمق في الملاحظات لميزات فردية. سنكون سعداء إذا تمكنت من ملء كلا القسمين إذا كان لديك وقت، ولكن إذا لم يكن ذلك ممكنًا، فلا بأس بإرسال إجاباتك بعد القسم الأول.

ستكون إجاباتك مجهولة تمامًا، على الرغم من أنه يمكنك اختيار مشاركة عناوين URL لتطبيقك معنا إذا أردت.

شكرًا لمساعدتنا في تحسين Next.js!

شكرًا للمساهمين

Next.js هو نتيجة العمل المشترك لأكثر من 2000 مطور فردي، شركاء صناعيين مثل Google و Facebook، وفريقنا الأساسي.

لتسهيل المساهمة، قمنا بنقل مستودع Next.js لاستخدام Turborepo لتحسين أداء البناء. كما أضفنا سقالة للاختبارات وروابط أخطاء لتسهيل البدء في كتابة الاختبارات. أخيرًا، سجلنا فيديو شرح مدته 40 دقيقة يوضح كيفية المساهمة في Next.js.

تم إنجاز هذا الإصدار بفضل مساهمات: @MaedahBatool، @mutebg، @sokra، @huozhi، @hanford، @shuding، @sean6bucks، @jameshfisher، @devknoll، @yuta-ike، @zh-lx، @amandeepmittal، @alunyov، @stefanprobst، @leerob، @balazsorban44، @kdy1، @brittanyrw، @jord1e، @kara، @vvo، @ismaelrumzan، @dlindenkreuz، @MohammadxAli، @nguyenyou، @thibautsabot، @hanneslund، @vertti، @KateKate، @stefee، @mikinovation، @Leticijak، @mohsen1، @ncphillips، @ehowey، @lancechentw، @krychaxp، @fmacherey، @pklawansky، @RyanClementsHax، @lakbychance، @sannajammeh، @oliviertassinari، @alexander-akait، @u-yas، @Cheprer، @msp5382، @chrispat، @getspooky، @Ryz0nd، @klaasman، @midgleyc، @kumard3، @jesstelford، @neeraj3029، @glenngijsberts، @pie6k، @wouterraateland، @timneutkens، @11koukou، @thesyedbasim، @aeneasr، @ijjk، @lfades، @JuniorTour، @xavhan، @mattyocode، @padmaia، @Skn0tt، @gwer، @Nutlope، @styfle، @stipsan، @xhoantran، @eolme، @sespinosa، @zenorocha، @hjaber، @benmvp، @T-O-R-U-S، @dburrows، @atcastle، @kiriny، @molebox، @Vienio99، @kyliau، @PepijnSenders، @krystofex، @PizzaPete، @souljuse، @Schniz، @Nelsonfrank، @Mhmdrza، @hideokamoto-stripe، @Emrin، @gr-qft، @delbaoliveira، @redbar0n، @lxy-yz، @Divlo، @kachkaev، @teleaziz، @OgbeniHMMD، @goncy، @bennettdams، @hsynlms، @callumgare، @jonrosner، @karaggeorge، @rpie3، @MartijnHols، @bashunaimiroy، @NOCELL، @rishabhpoddar، @omariosouto، @theMosaad، @javivelasco، @pierrenel، @lobsterkatie، @tharakabimal، @saevarb، @nbouvrette، @paulnbrd، @ecklf، @renbaoshuo، @chozzz، @tbezman، @karlhorky، @j-mendez، @ffan0811، @arthurfiorette، @chimit، @joperron، @moh12594، @rasmusjp، @bryanrsmith، @TrySound، @josharsh، @thecrypticace، @arturparkhisenko، @segheysens، @thevinter، @AryanBeezadhur، @xiaohp، @tknickman، @oriolcp، @smakosh، @jorrit، @mix3d، @Clecio013، @michielvangendt، @intergalacticspacehighway، @jbraithwaite، @marcelocarmona، @benmerckx، @haykerman، @steven-tey، @jaredpalmer، @pi-guy-in-the-sky، @JuanM04، @apollisa، @D-Pagey، @Kikobeats، @ramosbugs، @dan-weaver، @chris-stytch، @MikevPeeren، @janpio، @emw3، @nubpro، @cmdcolin، @joostdecock، @sgallese، @housseindjirdeh، @minervabot، @cjboco، @Ryuurock، @dm430، @mkarkachov، @nvh95، @gfortaine، @zifeo، @vicente-s، @Rohithgilla12، @brookton، @skirsten، @davidfateh، @DavidBabel، @mannybecerra، @pveyes، @kaykdm، @xhiroga، @mzaien، @losfair، @ykzts، @knezevicdev، @yang-feng-yfeng، @xuchaobei، @elkevinwolf، @fabienheureux، @nilskaspersson، @Andarist، @mathcrln، @dferber90، @FranciscoMoretti، @benschwarz، @wendellhu95، @gazdagergo، @imabp، @ljosberinn، @samuliasmala، @ka2jun8، @monsonjeremy، @pqt، @leoortizz، @michel-kraemer، @ntkoopman، @iicdii، @chentsulin، @ericmatthys، @lennym، @balogunkeji، @wnr، @chemicalkosek، @KittyGiraudel، @OKinane، @KonstHardy، @BrandonRomano، @furcan، @dusanralic، @elliottsj، @hi-ogawa، @panva، @genetschneider، @thundermiracle، @stefano-rainieri، @ericbiewener، @vordgi، @stevejarvis، @ihmpavel، @matamatanot، @dyarfaradj، @iheyunfei، @ascorbic، @fytriht، @emzoumpo، @onurtemiz، @a-ursino، @mxschmitt، @bywo، @OArnarsson، @TurekBot، @gish، @vadymshymko، @kamsar، @skhaz، @Prashoon123، @IrisvanOllefen، @evan-bradley، @ntltd، @EzequielDM، @oBusk، @martpie، @BruceRodrigues، @luke-h1، @lucasvazq، @velocity23، @AkiraTsuboi، @mitheelgajare، @JamiesWhiteShirt، @leroydev، @JulienZD، @leotaku، @mattfwood، و @kripod.