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

كما أعلنا في Next.js Conf، فإن مهمتنا في توفير أفضل تجربة للمطورين تستمر مع Next.js 11 الذي يتضمن:

• نظام التوافق (Conformance): نظام يوفر حلولاً مدروسة لدعم تجربة المستخدم المثلى.
• تحسينات الأداء: تحسينات إضافية لتقليل وقت بدء التشغيل البارد حتى تتمكن من البدء في البرمجة بشكل أسرع.
• next/script: تحميل تلقائي لأولويات البرامج النصية لجهات خارجية لتحسين الأداء.
• next/image: تقليل الانزياح في التخطيط وتحسين التجربة البصرية مع الكشف التلقائي عن الحجم ودعم العناصر النائبة المموهة.
• Webpack 5: مفعّل الآن افتراضيًا لجميع تطبيقات Next.js، مما يجلب هذه المزايا لجميع مطوري Next.js.
• هجرة Create React App (تجريبي): تحويل تلقائي لتطبيقات Create React App لتكون متوافقة مع Next.js.
• Next.js Live (إصدار معاينة): البرمجة في المتصفح، مع فريقك، في الوقت الفعلي.

قم بالتحديث اليوم عن طريق تشغيل npm i next@latest react@latest react-dom@latest واطلع على دليل الترقية أدناه.

نظام التوافق (Conformance)

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

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

اليوم، بدأ فريق منصات الويب في جوجل بفتح مصدر نظامهم مع نظام التوافق لـ Next.js.

نظام التوافق هو نظام يوفر حلولاً وقواعد مدروسة بعناية لدعم التحميل الأمثل ومؤشرات Core Web Vitals، مع إضافات أخرى قادمة لدعم جوانب الجودة الأخرى مثل الأمان وإمكانية الوصول. هذه الحلول تحرر فريقك من حفظ أحدث القواعد لأداء التحميل الأمثل، مع منحك المرونة لاتخاذ الخيارات الصحيحة لتطبيقاتك.

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

للبدء مع ESLint، قم بتشغيل npx next lint بعد الترقية إلى Next.js 11. تكامل ESLint يعمل مع تطبيقات Next.js الجديدة والحالية، ويوفر مجموعة جديدة من القواعد لمساعدة المطورين على بناء تطبيقات أفضل.

$ npx next lint
لقد أنشأنا ملف .eslintrc لك وأدرجنا تكوين ESLint الأساسي لـ Next.js.
 
./pages/about.js
7:9  تحذير: لا تقم بتضمين أوراق الأنماط يدويًا. انظر: https://nextjs.org/docs/messages/no-css-tags.  @next/next/no-css-tags
10:7  تحذير: البرامج النصية الخارجية المتزامنة ممنوعة. انظر: https://nextjs.org/docs/messages/no-sync-scripts.  @next/next/no-sync-scripts
 
./pages/index.js
4:10  تحذير: لا تستخدم وسم HTML <a> للتنقل إلى /about/. استخدم Link من 'next/link' بدلاً من ذلك. انظر: https://nextjs.org/docs/messages/no-html-link-for-pages.  @next/next/no-html-link-for-pages
 
هل تحتاج إلى تعطيل بعض قواعد ESLint؟ تعلم المزيد هنا: https://nextjs.org/docs/pages/building-your-application/configuring/eslint#disabling-rules
 
✨  تم في 1.94 ثانية.

تعرف على المزيد حول نظام التوافق للأطر في مدونة جوجل.

تحسينات الأداء

منذ Next.js 10، كنا مهووسين بتحسين تجربة المطور في Next.js بشكل أكبر. في الإصدار 10.1 و 10.2 قمنا بتحسين وقت البدء بنسبة تصل إلى 24% وقلصنا 40% من وقت المعالجة للتغييرات من خلال React Fast Refresh. لقد كنت تحصل على هذه التحسينات المذهلة في السرعة بمجرد الحفاظ على تحديث Next.js.

يتضمن Next.js 11 تحسينًا آخر لـ Babel لتقليل وقت البدء بشكل أكبر. لقد أنشأنا تنفيذًا جديدًا بالكامل لـ Babel loader لـ webpack، مما يحسن التحميل ويضيف طبقة تخزين مؤقت للتكوين في الذاكرة. في الممارسة العملية، هذا يعني عدم وجود تغيير للمطورين ولكن في النهاية يعني تجربة تطوير أسرع.

تحسين البرامج النصية (Script Optimization)

مكون Next.js Script الجديد هو تحسين أساسي يمكّن المطورين من تحديد أولوية تحميل البرامج النصية لجهات خارجية لتوفير وقت المطور وتحسين أداء التحميل.

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

مع next/script، يمكنك تحديد خاصية strategy وسيقوم Next.js تلقائيًا بتحديد أولوياتها لتحسين أداء التحميل:

• beforeInteractive: للبرامج النصية الحرجة التي تحتاج إلى جلبها وتنفيذها قبل أن تصفح الصفحة قابلة للتفاعل، مثل اكتشاف الروبوتات وإدارة الموافقة. يتم حقن هذه البرامج النصية في HTML الأولي من الخادم وتشغيلها قبل تنفيذ JavaScript المجمع ذاتيًا.
• afterInteractive (الافتراضي): للبرامج النصية التي يمكن جلبها وتنفيذها بعد أن تصبح الصفحة قابلة للتفاعل، مثل مديري العلامات والتحليلات. يتم حقن هذه البرامج النصية على جانب العميل وسيتم تشغيلها بعد hydration.
• lazyOnload: للبرامج النصية التي يمكنها الانتظار للتحميل أثناء وقت الفراغ، مثل دعم الدردشة وودجات وسائل التواصل الاجتماعي.

<Script
  src={url}
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

يمكنك أيضًا تشغيل التعليمات البرمجية بعد التحميل. على سبيل المثال، يمكنك الانتظار لتنفيذ التعليمات البرمجية حتى يجيب المستخدم على الموافقة:

<Script
  src={url} // إدارة الموافقة
  strategy="beforeInteractive"
  onLoad={() => {
    // إذا تم التحميل بنجاح، يمكنك تحميل برامج نصية أخرى بالتسلسل
  }}
/>

لقد غيرنا أيضًا تجربة تحميل البرامج النصية الافتراضية في Next.js 11 من preload و async إلى defer. غالبًا ما تتنافس البرامج النصية لجهات خارجية مع موارد ذات أولوية أعلى، مثل CSS والخطوط والصور. الحفاظ على التسلسل الصحيح بالنسبة لهذه الموارد، وكذلك البرامج النصية الأخرى، هو عبء غير ضروري على المطورين.

من خلال توفير مكون Script مع إستراتيجية تحميل افتراضية لـ afterInteractive، أصبح لدى المطورين الآن إعدادات افتراضية أفضل للأداء الأمثل، مع القدرة على اختيار beforeInteractive عند الحاجة.

لمعرفة المزيد حول الخيارات التقنية وراء تغيير الافتراضي، تحقق من RFC و تحديات preload من فريق Google Chrome.

تحسينات الصور (Image Improvements)

يسعدنا مشاركة اثنتين من الميزات الأكثر طلبًا من مجتمعنا لمكون next/image، تقليل انزياح التخطيط التراكمي (Cumulative Layout Shift) وإنشاء تجربة بصرية أكثر سلاسة.

الكشف التلقائي عن الحجم (الصور المحلية)

استخدم الكلمة الأساسية import لـ src الصورة لتحديد width و height تلقائيًا للصور الثابتة.

على سبيل المثال، أصبح استخدام مكون الصورة المدمج أسهل الآن:

import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // عند استيراد الصورة كمصدر، لا
    // تحتاج إلى تحديد `width` و `height`.
    <Image src={author} alt="صورة المؤلف" />
  );
}

العناصر النائبة للصور (Image Placeholders)

يدعم next/image الآن العناصر النائبة المموهة لتسهيل الانتقال من المساحة الفارغة إلى الصورة وتقليل وقت التحميل الملحوظ، خاصة للمستخدمين ذوي اتصالات الإنترنت البطيئة.

لاستخدام العناصر النائبة المموهة، أضف placeholder="blur" إلى صورتك.

<Image src={author} alt="صورة المؤلف" placeholder="blur" />

يدعم Next.js أيضًا تمويه الصور الديناميكية من خلال السماح لك بتوفير blurDataURL مخصص، والذي يتم توفيره بواسطة خادمك الخلفي. على سبيل المثال، يمكنك إنشاء blurha.sh على الخادم.

<Image
  src="https://nextjs.org/static/blog/next-11/learn.png"
  blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
  alt="صورة المؤلف"
  placeholder="blur"
/>

Webpack 5

مع Next.js 10.2، قمنا بتوسيع طرح webpack 5 لجميع التطبيقات بدون تكوين webpack مخصص في next.config.js. اليوم، نجعل webpack 5 الافتراضي لجميع تطبيقات Next.js، مما يوفر مجموعة متنوعة من الميزات والتحسينات.

لقد عملنا بشكل وثيق مع المجتمع لضمان انتقال سلس إلى webpack 5، حيث يتم تشغيل أكثر من 3400 اختبار تكامل موجود لـ Next.js في كل طلب سحب مع تمكين webpack 5.

إذا كان تطبيقك يحتوي على تكوين webpack مخصص، نوصي باتباع وثائق الترقية لـ webpack 5. إذا واجهت أي مشكلات، يرجى مشاركة الملاحظات معنا.

هجرة Create React App (CRA Migration)

خلال الأشهر الستة الماضية، شهدنا زيادة في التطبيقات التي تهاجر من Create React App إلى Next.js للاستفادة من العديد من تحسينات تجربة المطور وأداء المستخدم النهائي التي يوفرها Next.js.

لمساعدة المطورين على تحويل تطبيقاتهم إلى Next.js، قدمنا أداة جديدة إلى @next/codemod تقوم تلقائيًا بتحويل تطبيقات Create React App لتكون متوافقة مع Next.js.

يقوم التحويل تلقائيًا بإضافة دليل pages/ ونقل استيرادات CSS إلى المكان الصحيح. كما سيمكن وضع التوافق مع Create React App في Next.js الذي يضمن عمل بعض الأنماط المستخدمة في Create React App مع Next.js.

من خلال الاستفادة من التحويل الجديد، يمكنك اعتماد Next.js تدريجيًا مع الحفاظ على وظائف تطبيق Create React App الحالي.

للبدء في هجرة مشروع Create React App الخاص بك، استخدم الأمر التالي:

npx @next/codemod cra-to-next

هذه الميزة حاليا في مرحلة تجريبية، يرجى مشاركة أي ملاحظات في هذه المناقشة.

Next.js Live (إصدار معاينة)

Next.js Live هو استمرار لمهمتنا لجعل التطوير ليس فقط أسرع وأكثر متعة، ولكن بشكل حاسم أكثر شمولاً للمنظمة بأكملها. من خلال الاستفادة من التقنيات المتطورة مثل ServiceWorker و WebAssembly و ES Modules، يضع Next.js Live عملية التطوير بالكامل في متصفح الويب. هذا يفتح إمكانيات مثل التعاون والمشاركة على الفور مع عنوان URL، بدون خطوة بناء. بالنسبة للمطورين، هذا يعني حلقة ملاحظات أسرع، وقت أقل في انتظار عمليات البناء، وبرمجة وتحرير الأقران في الوقت الفعلي داخل المتصفح.

لمعرفة المزيد حول Next.js Live وكيف يمكنك إقرانه بمحرك التعاون في الوقت الفعلي لـ Vercel، راجع قسم Next.js Live في الوثائق.

دليل الترقية (Upgrade Guide)

يقدم Next.js 11 بعض التغييرات التي قد تؤثر على أقلية من المستخدمين. تم الحفاظ على هذه الميزات القديمة بطريقة متوافقة مع الإصدارات السابقة لسنوات، بعضها يعود إلى v4.0.

تمت إزالة هذه الميزات لتقليل حجم الحزمة وضمان إمكانية صيانة قاعدة التعليمات البرمجية للمستقبل. لمعرفة المزيد حول الترقية من الإصدار 10 إلى 11، يرجى الاطلاع على دليل الترقية.

مع Next.js 11، تم تحديث الحد الأدنى لإصدار React إلى 17.0.2. يرجى الاطلاع على مدونة React 17 لمزيد من التفاصيل. نحن نعمل أيضًا بشكل وثيق مع فريق React بينما يقدمون React 18. يستخدم Next.js 11 createRoot عند استخدام React 18 alpha.

المجتمع (Community)

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

نحن فخورون برؤية هذا المجتمع يستمر في النمو. خلال الأشهر الستة الماضية وحدها، شهدنا زيادة بنسبة 50٪ في تنزيلات Next.js على NPM، من 4.1 مليون إلى 6.2 مليون، وعدد الصفحات الرئيسية التي تستخدم Next.js في أفضل 10000 موقع حسب Alexa قد نما بنسبة 50٪.

تم إنجاز هذا الإصدار بفضل مساهمات: @kahy9، @ljosberinn، @leerob، @kettanaito، @thomasboyt، @hussainanjar، @styfle، @devknoll، @LiuuY، @timneutkens، @housseindjirdeh، @PepijnSenders، @janicklas-ralph، @payapula، @tmtk75، @ijjk، @hiramhuang، @daku10، @atcastle، @matamatanot، @pelhage، @Lukazovic، @Mzaien، @gleich، @geshan، @Munawwar، @ykzts، @vitalybaev، @mottox2، @vvo، @chrisneven، @turneand، @d3lm، @akellbl4، @sokra، @johnjago، @alicanyildirim، @sanathusk، @valse، @samrobbins85، @SamVerschueren، @ademilter، @ctjlewis، @brandondc741، @eltociear، @martpie، @kasipavankumar، @joecohens، @alexbrazier، @jamsinclair، @fabianishere، @rokinsky، @msidqi، @rubensdemelo، @Simply007، @bradlc، @SinimaWath، @rgabs، @darshkpatel، @sumanthratna، @shuding، @prophet1996، @Joonpark13، @tremby، @stefanprobst، @dopt، @rishabhpoddar، @aydinkn، @ErfanMirzapour، @tubbo، @frontendtony، @eric-burel، @iker-barriocanal، @eps1lon، @Gigiz، @mplis، @HaNdTriX، و @jigsawye.

تم ذكر الميزات التالية في Next.js Conf، ولكن تم شحنها مبكرًا من خلال الإصدارات 10.1 و 10.2:

• تحسين خطوط الويب التلقائي: تحسين الأداء من خلال تضمين CSS للخطوط.
• تحديث أسرع: من 100 مللي ثانية إلى 200 مللي ثانية أسرع في التحديث.
• تحسينات next/image: دعم Apple Silicon (M1)، بالإضافة إلى المزيد من خيارات التخطيط والمحمل.
• تكامل Next.js Commerce مع Shopify: طبقة بيانات مرنة لتطبيقات التجارة الإلكترونية القابلة للتكوين. يدعم Next.js Commerce حاليًا Shopify و BigCommerce و Saleor و Swell و Vendure.