الإصدار 11

لترقية إلى الإصدار 11، قم بتنفيذ الأمر التالي:

Terminal

npm install next@11

yarn add next@11

Webpack 5

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

تنظيف `distDir` أصبح افتراضيًا الآن

دليل إخراج البناء (الافتراضي هو .next) يتم تنظيفه الآن افتراضيًا باستثناء ذاكرة التخزين المؤقت لـ Next.js. يمكنك الرجوع إلى RFC الخاص بتنظيف distDir لمزيد من المعلومات.

إذا كان تطبيقك يعتمد على هذا السلوك سابقًا، يمكنك تعطيل السلوك الافتراضي الجديد عن طريق إضافة علامة cleanDistDir: false في ملف next.config.js.

دعم متغير البيئة `PORT` لـ `next dev` و `next start`

يدعم Next.js 11 متغير البيئة PORT لتعيين المنفذ الذي يعمل عليه التطبيق. لا يزال يوصى باستخدام -p/--port ولكن إذا كنت محظورًا من استخدام -p بأي طريقة، يمكنك الآن استخدام PORT كبديل:

مثال:

PORT=4000 next start

تخصيص `next.config.js` لاستيراد الصور

يدعم Next.js 11 استيراد الصور الثابتة مع next/image. تعتمد هذه الميزة الجديدة على القدرة على معالجة استيراد الصور. إذا كنت قد أضفت سابقًا حزم next-images أو next-optimized-images، يمكنك إما الانتقال إلى الدعم المدمج الجديد باستخدام next/image أو تعطيل الميزة:

next.config.js

module.exports = {
  images: {
    disableStaticImages: true,
  },
}

إزالة `super.componentDidCatch()` من `pages/_app.js`

تم إهمال componentDidCatch لمكون next/app في Next.js 9 لأنه لم يعد هناك حاجة إليه وأصبح منذ ذلك الحين بلا تأثير. في Next.js 11، تمت إزالته.

إذا كان لديك طريقة componentDidCatch مخصصة في pages/_app.js، يمكنك إزالة super.componentDidCatch لأنه لم يعد هناك حاجة إليه.

إزالة `Container` من `pages/_app.js`

تم إهمال هذا التصدير في Next.js 9 لأنه لم يعد هناك حاجة إليه وأصبح منذ ذلك الحين بلا تأثير مع ظهور تحذير أثناء التطوير. في Next.js 11، تمت إزالته.

إذا كان ملف pages/_app.js يستورد Container من next/app، يمكنك إزالته لأنه تمت إزالته. تعلم المزيد في التوثيق.

إزالة استخدام `props.url` من مكونات الصفحة

تم إهمال هذه الخاصية في Next.js 4 وكانت تظهر تحذيرًا أثناء التطوير منذ ذلك الحين. مع إدخال getStaticProps / getServerSideProps، كانت هذه الطرق تمنع بالفعل استخدام props.url. في Next.js 11، تمت إزالته تمامًا.

يمكنك التعلم أكثر في التوثيق.

إزالة الخاصية `unsized` من `next/image`

تم إهمال الخاصية unsized في next/image في Next.js 10.0.1. يمكنك استخدام layout="fill" بدلاً من ذلك. في Next.js 11، تمت إزالة unsized.

إزالة الخاصية `modules` من `next/dynamic`

تم إهمال خيارات modules و render لـ next/dynamic في Next.js 9.5. تم ذلك لجعل واجهة برمجة التطبيقات next/dynamic أقرب إلى React.lazy. في Next.js 11، تمت إزالة خيارات modules و render.

لم يتم ذكر هذا الخيار في التوثيق منذ Next.js 8 لذا فمن غير المحتمل أن يكون تطبيقك يستخدمه.

إذا كان تطبيقك يستخدم modules و render، يمكنك الرجوع إلى التوثيق.

إزالة `Head.rewind`

أصبح Head.rewind بلا تأثير منذ Next.js 9.5، في Next.js 11 تمت إزالته. يمكنك إزالة استخدامك لـ Head.rewind بأمان.

استبعاد لغات Moment.js افتراضيًا

تتضمن Moment.js ترجمات للعديد من اللغات افتراضيًا. يقوم Next.js الآن باستبعاد هذه اللغات تلقائيًا افتراضيًا لتحسين حجم الحزمة للتطبيقات التي تستخدم Moment.js.

لتحميل لغة محددة، استخدم هذا المقتطف:

import moment from 'moment'
import 'moment/locale/ja'

moment.locale('ja')

يمكنك إلغاء تفعيل هذا الافتراضي الجديد عن طريق إضافة excludeDefaultMomentLocales: false إلى next.config.js إذا كنت لا تريد السلوك الجديد، لاحظ أنه يوصى بشدة بعدم تعطيل هذا التحسين الجديد لأنه يقلل بشكل كبير من حجم Moment.js.

تحديث استخدام `router.events`

في حال كنت تصل إلى router.events أثناء التصيير، في Next.js 11 لم يعد router.events متاحًا أثناء التصيير المسبق. تأكد من الوصول إلى router.events في useEffect:

useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    console.log(
      `App is changing to ${url} ${
        shallow ? 'with' : 'without'
      } shallow routing`
    )
  }

  router.events.on('routeChangeStart', handleRouteChange)

  // If the component is unmounted, unsubscribe
  // from the event with the `off` method:
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

إذا كان تطبيقك يستخدم router.router.events الذي كان خاصية داخلية ولم تكن عامة، تأكد من استخدام router.events أيضًا.

الترقية من React 16 إلى 17

أدخل React 17 تحويل JSX جديد الذي يجلب ميزة كانت موجودة منذ فترة طويلة في Next.js إلى مجتمع React الأوسع: عدم الحاجة إلى import React from 'react' عند استخدام JSX. عند استخدام React 17، سيقوم Next.js تلقائيًا باستخدام التحويل الجديد. هذا التحويل لا يجعل المتغير React عامًا، وهو ما كان تأثيرًا جانبيًا غير مقصود للتنفيذ السابق لـ Next.js. يتوفر أداة تعديل تلقائي لإصلاح الحالات التي استخدمت فيها React دون استيراده عن طريق الخطأ.

معظم التطبيقات تستخدم بالفعل أحدث إصدار من React، مع Next.js 11 تم تحديث الحد الأدنى لإصدار React إلى 17.0.2.

لترقية، يمكنك تنفيذ الأمر التالي:

npm install react@latest react-dom@latest

أو باستخدام yarn:

yarn add react@latest react-dom@latest

On this page