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

Next.js 10.1

يُقدم Next.js 10.1 تحديثًا أسرع بثلاث مرات، حجم تثبيت أقل بنسبة 58٪، تبعيات أقل بنسبة 56٪، تحسين صور باستخدام WebAssembly، دعم محسن لـ next/image، والمزيد!

نحن متحمسون لتقديم Next.js 10.1 الذي يتضمن:

تحديث أسرع بثلاث مرات

بدءًا من الإصدار 9.4، قدم Next.js التحديث السريع من Facebook كمصدر مفتوح للحصول على ملاحظات فورية على التعديلات التي تجريها على مكونات React الخاصة بك.

هذا يعني أن Next.js يقوم فقط بتحديث الكود في الملف الذي قمت بتعديله، ويعيد عرض هذا المكون فقط، دون فقدان حالة المكون. يتضمن ذلك الأنماط (مضمنة، CSS-in-JS، أو وحدات CSS/Sass)، وعلامات الترميز، ومعالجات الأحداث، والتأثيرات (عبر useEffect).

اليوم، نجعلها أسرع بـ 200 مللي ثانية في كل تعديل دون أي تغييرات في الكود من جانبك. في المتوسط، هذا يجعل التحديث السريع أسرع بثلاث مرات.

هل تريد أداءً أسرع وأوقات بناء أفضل؟ يمكنك اختيار Webpack 5 اليوم باستخدام علامة future الجديدة. هذه العلامة هي مرشح للإصدار (RC) وسيصبح Webpack 5 الافتراضي قريبًا. بعد تمكين هذه العلامة، يرجى مشاركة أي ملاحظات معنا.

next.config.js
module.exports = {
  future: {
    webpack5: true,
  },
};

لمعرفة المزيد حول كيفية طرح Webpack 5 لتطبيقك بطريقة متوافقة مع الإصدارات السابقة، تحقق من التوثيق.

تحسين وقت التثبيت

لقد قمنا بتحسين رسم تبعيات Next.js لتقليل وقت التثبيت وحجم التبعيات. أصبح الآن أسرع من أي وقت مضى لإنشاء مشروع Next.js، سواء محليًا أو في عملية CI/CD الخاصة بك.

10.010.1الفرق
متوسط وقت التثبيت~15 ثانية~5 ثوانأسرع بثلاث مرات
حجم التثبيت96.5 ميجابايت39.9 ميجابايتأقل بنسبة 58٪
عدد التبعيات424187أقل بنسبة 56٪

كجزء من هدفنا لتحسين التبعيات، قمنا أيضًا بتحديث و/أو استبدال حزم npm التي تم وضع علامة عليها كمهملة من قبل مؤلفيها - حتى عندما كانت متداخلة بعمق في شجرة التبعيات. سيؤدي التثبيت الجديد لـ Next.js 10.1 الآن إلى عدم وجود تحذيرات للحزم.

تحسينات next/image

دعم Apple Silicon

عند إصدار Next.js 10، كان تحسين الصور يعتمد على تبعية أصلية. أدى هذا إلى وقت تثبيت أبطأ، حيث استهلكت التبعيات الأصلية 50٪ من إجمالي حجم تثبيت Next.js. علاوة على ذلك، هذا يزيل تشغيل البرامج النصية بعد التثبيت ويسبب التجميع عند الطلب.

نحن متحمسون لمشاركة تحسين الصور التلقائي عبر next/image الذي يعمل الآن باستخدام WebAssembly. يعمل هذا التحسين مباشرة باستخدام next dev و next start. باستخدام WASM، قمنا بتقليل حجم التثبيت بحوالي 30 ميجابايت وأضفنا دعمًا لأجهزة Apple Silicon M1 MacBooks.

نواصل تحسين أداء WebAssembly الخاص بنا من خلال الاستفادة من امتدادات SIMD والتعددية الخيوط.

تخطيطات إضافية

بناءً على ملاحظاتكم، أضفنا مجموعة متنوعة من التخطيطات والخيارات الجديدة لـ next/image:

لمزيد من المعلومات، تحقق من توثيق layout.

تحسين دعم تحسين الصور

قمنا بتوسيع محملات الصور المدمجة لـ next/image مع القدرة على إضافة أي محمل مخصص. باستخدام خاصية loader الجديدة، يمكنك تحسين الصور مع أي مزود أو CDN.

components/my-image.js
import Image from 'next/image';
 
const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
};
 
const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="صورة المؤلف"
      width={500}
      height={500}
    />
  );
};

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

تكامل Next.js Commerce مع Shopify

التجارة الإلكترونية هي واحدة من أسرع الصناعات نموًا التي تعتمد Next.js. تثق شركات مثل Apple وWal-Mart وMcDonald's وNike في Next.js.

أردنا أن نقدم لك نقطة بدء عالية الأداء لبناء تطبيقات التجارة الإلكترونية، لذا أصدرنا Next.js Commerce. بعد آلاف الطلبات لـ Shopify، قمنا بتحديث Next.js Commerce مع واجهة مستخدم مستقلة عن المزود - مما يتيح لك إحضار أي حل تجارة إلكترونية headless من اختيارك.

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

مقاييس Lighthouse لـ Next.js Commerce حول العالم.

مقاييس Lighthouse لـ Next.js Commerce حول العالم.

ببضع نقرات، يمكن لمطوري Next.js استنساخ ونشر وتخصيص متجر التجارة الإلكترونية الخاص بهم بالكامل. تعلم المزيد على nextjs.org/commerce وجرب عرض Shopify التجريبي. سيتم قريبًا دعم المزيد من مزودي التجارة الإلكترونية.

صفحة 500 مخصصة

يمكنك الآن إنشاء pages/500.js مخصصة لإضافة شعارك وعلامتك التجارية عند عرض الأخطاء. على غرار pages/404.js، يتم إنشاء هذا الملف بشكل ثابت أثناء البناء.

pages/500.js
export default function Custom500() {
  return <h1>500 - حدث خطأ في جانب الخادم</h1>;
}

تحميل صارم لإعدادات PostCSS

إذا كنت تستخدم PostCSS وWebpack 5، يمكنك تحسين الأداء (عبر التخزين المؤقت) باستخدام علامة future الجديدة.

next.config.js
module.exports = {
  future: {
    webpack5: true,
    strictPostcssConfiguration: true,
  },
};

جربها اليوم وأخبرنا بملاحظاتك. لمزيد من المعلومات، تحقق من توثيق تكوين PostCSS.

دعم extends في tsconfig.json

يمكنك الآن استخدام extends في tsconfig.json المستخدم بواسطة Next.js للتمديد من tsconfig.json مختلف في مشروعك. على سبيل المثال، يمكنك التمديد من tsconfig.base.json في مشروعك كما يلي:

tsconfig.json
{
  "extends": "./tsconfig.base.json"
}

لمزيد من المعلومات، تحقق من توثيق TypeScript.

الكشف عند تمكين وضع المعاينة

يمكنك الآن الكشف عند تمكين وضع المعاينة، مما يسمح لك بعرض مكونات معينة فقط للمحررين.

components/MyComponent.js
import { useRouter } from 'next/router';
 
function MyComponent() {
  const { isPreview } = useRouter();
  return <>{isPreview ? <h1>تم تمكين وضع المعاينة</h1> : null}</>;
}

لمزيد من المعلومات، تحقق من توثيق وضع المعاينة.

طرق الموجه للتمرير إلى الأعلى

عند التنقل باستخدام next/link، سيقوم Next.js تلقائيًا بالتمرير إلى الأعلى. مع Next.js 10.1، سيقوم router.push و router.replace أيضًا بالتمرير تلقائيًا إلى الأعلى لمطابقة سلوك next/link. يمكنك إلغاء التمرير التلقائي باستخدام خيار scroll.

لمزيد من المعلومات، تحقق من توثيق next/router.

تحسينات التوثيق

لقد أضفنا أيضًا مجموعة متنوعة من الأدلة والموارد والتوثيق الجديدة، بما في ذلك:

المجتمع

نحن متحمسون لرؤية النمو المستمر في اعتماد Next.js:

  • لدينا أكثر من 1,540 مساهمًا مستقلًا، مع أكثر من 240 مساهمًا جديدًا منذ إصدار 10.0
  • على GitHub، تم وضع علامة نجمية على المشروع أكثر من 64,950 مرة.

انضم إلى مجتمع Next.js على مناقشات GitHub. المناقشات هي مساحة مجتمعية تتيح لك التواصل مع مستخدمي Next.js الآخرين وطرح الأسئلة أو مشاركة عملك بحرية. يمكنك أيضًا الانضمام إلى Discord الرسمي لـ Next.js.

الاعتمادات

نحن ممتنون لمجتمعنا، بما في ذلك جميع الملاحظات والمساهمات الخارجية التي ساعدت في تشكيل هذا الإصدار.

تم تقديم هذا الإصدار بفضل مساهمات: @shuding، @edazpotato، @laithyounes، @ijjk، @harshitsan، @selrond، @sromexs، @melono6، @timneutkens، @madou، @mottox2، @leerob، @divmain، @nblthree، @KennethKinLum، @KarthikeyanRanasthala، @alex-safian، @rishabhpoddar، @daviavmello، @jpalmieri، @merceyz، @Segolene-Alquier، @michrome، @janicklas-ralph، @Parnswir، @giraffesyo، @balazsorban44، @Cicada95، @vzaidman، @deniseyu، @eltociear، @unimprobable، @getspooky، @Timer، @armand1m، @alexknipfer، @elitan، @atcastle، @noahfschr، @amille44420، @laanayam333، @spidgorny، @devuxer، @Janpot، @nickbabcock، @rsipakov، @NkxxkN، @dominicfraser، @alevosia، @Kerumen، @CMeeg، @Pomaio، @tim-hanssen، @lachlanjc، @lebreRafael، @AryanBeezadhur، @guybedford، @petecorreia، @kaznak، @sam3d، @fwuensche، @rafaellaurindo، @sphilee، @styxlab، @rexxars، @smitbarmase، @maerzhase، @matamatanot، @lucleray، @jeremybalog، @tarunama، @zainfathoni، @destumme، @VictorAssis، @bhbs، @ciruz، @simnalamburt، @Almad، @frol، @ludofischer، @elliottsj، @Baheya، @Lalit2005، @vldmrkl، @AriFreyr، @kaykdm، @Sharcoux، @ramasilveyra، @devknoll، @botv، @pkellner، @sumanthratna، @sokra، @lfades، @thorwebdev، @berndartmueller، @davidspiessens، @ShashiSrinath، @elsigh، @MMT-LD، @hankandre، @maxnowack، @kmjennison، @darshkpatel، @mohsen1، @DylanRJohnston، @calmonr، @imrobinized، @justintemps، @ncarchedi، @btk، @faizanv، @chulkilee، @ryan-lustre، @dfelber، @Ymirke، @Robogeek95، @mcha-dev، @youngvform، @andrehsu، @Simply007، @rokobekavac0، @ja0n، @mattruby، @xom9ikk، @niko20، @LauraBeatris، @armspkt، @xiaooye، @sungpro، @awareness481، @joebernard، @jensmeindertsma، @donavon، @DaneTheory، @Zertz، @danielyefet، @lfender6445، @tajo، @jorrit، @tvler، @mustafaKamal-fe، @prateekbh، @gregrickaby، @enochndika، @zimv، @lharries، @JstnEdr، @zbialecki، @fredmontet، @leo، @kachkaev، @mongolyy، @justinphilpott، @mjr، @fireairforce، @jvarho، @gr-qft، @thomaswang، @c316، @benbender، @michael، @damusnet، @farhankk360، @smaktacular، @webda2l، @chibicode، @bar7b، @SiTaggart، @lolobosse، @jamesgeorge007، @nikosantis، @mikan3rd، @oshdev، @UnbearableBear، @tunesmith، @jamsinclair، @ivandotv، @Arthie، @louison، @FutureKode، @wesleytian، @dennismorello، @vispaduchuri، @styfle، @caulagi، @berekuk، @jescalan، @cascandaliato، @coetry، @PepijnSenders، @dkempner، @dlackty، @aralroca، @felixmeziere، @bmvantunes، @hideokamoto، @bram-l، @craigdanj، @ErikAugust، @joiglifberg، @blvdmitry، @bragle، @ykdojo، @vitorhsb، @TrySound، @mattfwood، @ka2jun8، @rfinkley، @bannier، @karlhorky، @shihabus، @yakovlevyuri، @dav-is، @lundgren2، @NoobTW، @Cow258، @toshi1127، @jorisw، @rifaidev، @willianjusten، @willheslam، @alexvilchis، @vitordino، @matthewlilley، @Prottoy2938، @brunocrosier، @OriginalEXE، @sidthesloth92، @davidsonsns، @saitolume، @tolfino، @iczero، @WestonThayer، @galanggg، @davidgolden، @weichienhung، @ashconnell، @callumbooth، @lyderichti59، @lukyth، @FredyC، @danielstocks، @valse، @MrJmpl3، @Sm1t، @lucas-varela، @jose-donato، @chr-ge، @pocorschi، @jflayhart، @aried3r، @LittleboyHarry، @Akumzy، @xeust، @tonyspiro، @yordis، @AmrSaber، @Mzaien، @PaulPCIO، @quinnturner، @SebastianTroc، @JipSterk، @developit، @yokinist، @queq1890، @oriverk، @ospira، @danielivert، @huv1k، @minhtule، @shunkakinoki، @khades، @eric-burel، @turadg، @huozhi، و @scottmacdonnell!