كيفية الترقية إلى الإصدار 11

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

npm i next@11 react@17 react-dom@17

yarn add next@11 react@17 react-dom@17

pnpm up next@11 react@17 react-dom@17

bun add next@11 react@17 react-dom@17

معلومة مفيدة: إذا كنت تستخدم TypeScript، تأكد من ترقية @types/react و @types/react-dom إلى الإصدارات المقابلة لها.

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 أو تعطيل الميزة:

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)

  // إذا تم إلغاء تحميل المكون، قم بإلغاء الاشتراك
  // من الحدث باستخدام طريقة `off`:
  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