الإصدار 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. إذا كان لديك تكوين مخصص، يمكنك الرجوع إلى توثيق 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