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

Next.js 12.3

يُقدم Next.js 12.3 تثبيت TypeScript التلقائي، تحديث Fast Refresh محسن، مكون الصورة الجديد المستقر، والمزيد!

لقد قمنا بإصدار بعض التحسينات التي تعزز تجربة الاستخدام في Next.js مع الإصدار 12.3:

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

إعلان عن مؤتمر Next.js المجتمعي العالمي الثالث في 25 أكتوبر. سجل الآن →

Next.js Conf

أنت مدعو إلى المؤتمر المجتمعي العالمي لـ Next.js في 25 أكتوبر. بمناسبة الذكرى السادسة لـ Next.js، سنقدم:

  • ميزات تستفيد من React Server Components و Streaming و Suspense.
  • اصطلاحات تجعل من السهل على المطورين تحسين وتوسيع التطبيقات.
  • أدوات مفتوحة المصدر تجعل التطوير المحلي وعمليات البناء للإنتاج أسرع.

احصل على تذكرتك المجانية وشاهد مستقبل Next.js و React، وتابع @nextjs لمزيد من الإعلانات قريبًا. نحن نبحث أيضًا عن محادثات مجتمعية. قدم اقتراحًا لمحادثة وشارك قصة ما تقوم ببنائه باستخدام Next.js.

تثبيت TypeScript التلقائي

يحتوي Next.js على دعم مدمج للتكوين التلقائي لـ TypeScript. سابقًا، إضافة TypeScript إلى مشروع موجود تطلب تثبيت التبعيات اللازمة يدويًا.

مع هذا الإصدار، يكتشف Next.js تلقائيًا عند إضافة ملفات TypeScript إلى مشروع، يقوم بتثبيت التبعيات اللازمة وإضافة ملف tsconfig.json. يعمل هذا عند تشغيل next dev و next build.

فيديو يوضح Next.js يقوم بالتثبيت التلقائي لـ TypeScript.

Fast Refresh محسن

التكرارات السريعة ضرورية لسير عمل التطوير المحلي. يستخدم Next.js Fast Refresh للحصول على ملاحظات فورية على التعديلات التي تجريها على مكونات React. اضغط حفظ وشاهد التغييرات تنعكس في المتصفح بدون الحاجة إلى إعادة تحميل الصفحة.

مع Next.js 12.3، بعض ملفات التكوين الآن تعيد التحميل السريع عند إجراء التعديلات، بما في ذلك:

  • .env و env.* المتغيرات
  • jsconfig.json
  • `tsconfig.json**

لم تعد بحاجة إلى إعادة تشغيل خادم التطوير المحلي عند إجراء تغييرات على ملفات التكوين هذه.

فيديو يوضح Next.js يعيد التحميل السريع لملف `.env`.

مكون الصورة

مكون next/future/image (مستقر)

في Next.js 12.2، شاركنا معاينة تجريبية لمكون جديد للصورة يبسط كيفية تنسيق الصور ويحسن الأداء باستخدام التحميل الكسول للمتصفح الأصلي.

أصبح مكون الصورة الجديد الآن مستقرًا ولم يعد يتطلب علامة تجريبية.

منذ الإصدار الأخير، قمنا بإجراء المزيد من التحسينات:

  • أضفنا دعمًا لوضع التخطيط fill الذي يجعل الصورة تملأ العنصر الأصلي.
  • حسّننا العنصر النائب blur-up ليعمل مع الصور الشفافة، لم يعد يحتاج إلى <noscript>، و next dev يتطابق مع next start.
  • منعنا الانزياح الطفيف في التخطيط (في المتصفحات غير Chrome) عن طريق إخفاء نص alt أثناء تحميل الصورة.
  • أصبحت خاصية alt مطلوبة لتحسين إمكانية الوصول.
  • أصلحنا خاصية onError عند حدوث خطأ قبل الترطيب.
  • أصلحنا نسبة العرض إلى الارتفاع للصورة المستوردة بشكل ثابت التي تحتوي فقط على width أو height.
  • حسّننا رسائل الخطأ عند استخدام إعدادات أو تكوين غير صحيح.

في المستقبل، نخطط لإعادة تسمية next/image إلى next/legacy/image و next/future/image إلى next/image. سيوفر هذا تجربة رائعة لمشاريع Next.js الجديدة وستتمكن المشاريع الحالية من الترحيل بسهولة باستخدام أداة التعديل التلقائي next/image. سنقدم المزيد من التفاصيل مع اقتراب الإصدار الرئيسي التالي.

لمزيد من المعلومات حول كيفية استخدامه اليوم، يرجى الرجوع إلى الوثائق التي تتضمن دليل الترحيل.

أنماط عن بعد (مستقرة)

remotePatterns تتيح لك تحديد أحرف البدل للصور البعيدة عند استخدام واجهة برمجة التطبيقات المدمجة لتحسين الصور. تتيح مطابقة أكثر قوة تتجاوز تكوين images.domains الحالي، الذي يقوم فقط بمطابقة دقيقة لاسم النطاق.

أصبح هذا الخيار الآن مستقرًا ويمكن استخدامه مع خيار التكوين التالي:

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        // يجب أن ينتهي اسم المضيف لخاصية `src` بـ `.example.com`،
        // وإلا ستستجيب واجهة برمجة التطبيقات بـ 400 طلب غير صالح.
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
};

تعطيل تحسين الصورة (مستقر)

تتطلب واجهة برمجة التطبيقات لتحسين الصورة خادمًا لتحسين الصور عند الطلب. يعمل هذا بشكل رائع عند الاستضافة الذاتية باستخدام next start أو النشر على منصات مثل Vercel. ومع ذلك، لن يعمل هذا مع next export لأنه لا يتضمن خادمًا لتحسين الصور. سابقًا، كنت بحاجة إلى تكوين موفر تحسين صور طرف ثالث باستخدام خاصية loader، ولكن الآن يمكنك تعطيل تحسين الصورة تمامًا باستخدام next.config.js لجميع حالات next/image.

أصبح هذا الخيار التجريبي السابق الآن مستقرًا ويمكن استخدامه مع خيار التكوين التالي:

next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
};

SWC Minifier (مستقر)

في Next.js 12، قدمنا تصغير الكود باستخدام SWC كجزء من الميزات التجريبية لـ مترجم Next.js. أظهرت النتائج المبكرة أن التصغير باستخدام SWC كان أسرع بـ 7 مرات من الإصدار السابق مع Terser.

مع هذا الإصدار، أصبحت الميزة مستقرة ويمكنك تفعيلها باستخدام خيار next.config.js التالي:

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

نخطط لجعل SWC minifier الافتراضي في الإصدار الرئيسي التالي.

تحديث الموجه الجديد والتخطيطات

في وقت سابق من هذا العام، نشرنا Layouts RFC الذي قدم أكبر تحديث لـ Next.js منذ إصداره في 2016. تتضمن هذه التغييرات موجهًا جديدًا مبنيًا على React Server Components. بدأ العمل على التنفيذ ونحن نعمل نحو إصدار تجريبي عام في الإصدار الرئيسي التالي.

اليوم، نشارك المزيد من المعلومات حول الميزات القادمة، بما في ذلك:

بالإضافة إلى ذلك، في RFC مختلف، نستكشف إضافة دعم للاستيراد العالمي لـ CSS في دليل app الجديد. سيسمح لك ذلك باستخدام الحزم التي تستورد ملفات .css الخاصة بها دون تكوين إضافي.

اقرأ المزيد عن هذه الميزات الجديدة في Layouts RFC.

تحسينات أخرى

  • وثائق جديدة حول ميزات إمكانية الوصول المدمجة في Next.js.
  • قوالب create-next-app تتضمن الآن دعم الوضع المظلم تلقائيًا باستخدام تفضيلات نظامك.
  • src/ أصبح الآن دليلًا افتراضيًا للفحص عند استخدام دعم ESLint المدمج.
  • next.config.js يتضمن الآن تحققًا من الصحة باستخدام ajv، مما يساعد على منع سوء استخدام خيارات التكوين.
  • next.config.js يحتوي الآن على علامة تكوين تجريبية fallbackNodePolyfills: false لمنع Next.js من توفير polyfills لواجهات برمجة تطبيقات Node.js للمتصفح (مما يؤدي إلى زيادة أحجام الحزم). سيؤدي هذا الخيار إلى ظهور خطأ في وقت البناء يوضح مصدر الاستيراد غير الضروري.

المجتمع

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

جاء هذا الإصدار بفضل مساهمات: @pthomas931، @madmed88، @sanjaiyan-dev، @balazsorban44، @DonghyukJacobJang، @chaiwattsw، @styfle، @dunglas، @ahkhanjani، @promer94، @terrierscript، @shawncal، @insik-han، @QuiiBz، @ykzts، @JoshuaKGoldberg، @lucasassisrosa، @dikwickley، @Brooooooklyn، @sicarius97، @FourwingsY، @manovotny، @SukkaW، @pepoeverton، @jdeniau، @sumiren، @anthonyshew، @pekarja5، @huozhi، @leerob، @fediev، @atcastle، @shuding، @feugy، @jonohewitt، @zakiego، @Schniz، @timneutkens، @wyattjoh، @MaedahBatool، @X7Becka، @nnnnoel، @dcdev67، @alvinometric، @timothympace، @jeferson-sb، @ijjk، @theMosaad، @Yuddomack، @msquitieri، @andreizanik، @nix6839، @thomasballinger، @ziishaned، @xyeres، @nyedidikeke، @maxproske، @sokra، @titusdmoore، @thebergamo، @fikrikarim، @Kikobeats، @clearlyTHUYDOAN، @nasso، @qutek، @kdy1، @kyliau، @housseindjirdeh، @barissayil، @seveibar، @Jessidhia، @santidalmasso، @JohnDaly، @Nikhilnama18، @mduleone، @colinhacks، @ductnn، @josh، @hiro0218، @eltociear، @kwonoj، @valcosmos، @mihaic195، @stefanprobst، @KATT، @thiagomorales، @danielcavanagh، @steven-tey، @hellomhc، @trevor-fauna، @nguyenyou، @eminvergil، @lobsterkatie، @dorian-davis، @sambecker، @isaac-martin، @lfades، @amorimr، @javivelasco، @mongolyy، @Thisen، @zorrolisto، @ethomson، @padmaia، @thisisjofrank، @dominiksipowicz، @awareness481، @pakaponk، @apledger، @longzheng، @tknickman، @rbrcsk، @emersonlaurentino، @carstenlebek، @edusig، @riccardogiorato، @hanneslund، @ryanhaticus، @j-mendez، @armandabric، @WinmezzZ، @andershagbard، @dammy001، @MarDi66، @okmttdhr، @rishabhpoddar، @marjorg، @dustinsgoodman، و @zanechua.