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

الترقية من الإصدار 12 إلى 13

لتحديث Next.js إلى الإصدار 13، قم بتنفيذ الأمر التالي باستخدام مدير الحزم المفضل لديك:

npm i next@13 react@latest react-dom@latest eslint-config-next@13

yarn add next@13 react@latest react-dom@latest eslint-config-next@13

pnpm i next@13 react@latest react-dom@latest eslint-config-next@13

bun add next@13 react@latest react-dom@latest eslint-config-next@13

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

ملخص الإصدار 13

• تم تغيير المتصفحات المدعومة بحيث لم يعد Internet Explorer مدعومًا وتم استهداف المتصفحات الحديثة.
• تم رفع الحد الأدنى لإصدار Node.js من 12.22.0 إلى 16.14.0، حيث أن الإصدارات 12.x و14.x وصلت إلى نهاية دعمها.
• تم رفع الحد الأدنى لإصدار React من 17.0.2 إلى 18.2.0.
• تم تغيير خاصية التكوين swcMinify من false إلى true. راجع مترجم Next.js لمزيد من المعلومات.
• تم تغيير استيراد next/image إلى next/legacy/image. وتم تغيير استيراد next/future/image إلى next/image. يتوفر أداة تعديل تلقائي (codemod) لإعادة تسمية الواردات تلقائيًا وبأمان.
• لم يعد من الممكن أن يكون العنصر الفرعي لـ next/link هو <a>. أضف الخاصية legacyBehavior لاستخدام السلوك القديم أو قم بإزالة <a> للترقية. يتوفر أداة تعديل تلقائي (codemod) لترقية الكود تلقائيًا.
• تمت إزالة خاصية التكوين target واستبدالها بـ تتبع ملفات الإخراج (Output File Tracing).

ترحيل الميزات المشتركة

يقدم Next.js 13 دليل app جديد بميزات واتفاقيات جديدة. ومع ذلك، لا يتطلب الترقية إلى Next.js 13 استخدام موجه app الجديد.

يمكنك الاستمرار في استخدام pages مع الميزات الجديدة التي تعمل في كلا الدليلين، مثل مكون الصورة المحدث، مكون الرابط، مكون النص البرمجي، وتحسين الخطوط.

مكون <Image/>

قدم Next.js 12 العديد من التحسينات على مكون الصورة باستخدام استيراد مؤقت: next/future/image. تضمنت هذه التحسينات كمية أقل من JavaScript على جانب العميل، طرق أسهل لتوسيع وتصميم الصور، تحسين إمكانية الوصول، وتحميل كسول (lazy loading) افتراضي في المتصفح.

بدءًا من Next.js 13، أصبح هذا السلوك الجديد هو الافتراضي لـ next/image.

يتوفر أداتان تعديل تلقائي (codemod) لمساعدتك في ترحيل مكون الصورة الجديد:

• next-image-to-legacy-image: ستقوم هذه الأداة بإعادة تسمية واردات next/image إلى next/legacy/image تلقائيًا وبأمان للحفاظ على نفس سلوك Next.js 12. نوصي بتشغيل هذه الأداة لتحديث Next.js 13 تلقائيًا وبسرعة.
• next-image-experimental: بعد تشغيل الأداة السابقة، يمكنك اختياريًا تشغيل هذه الأداة التجريبية لترقية next/legacy/image إلى next/image الجديد، مما سيزيل الخصائص غير المستخدمة ويضيف أنماط مضمنة. لاحظ أن هذه الأداة تجريبية وتغطي فقط الاستخدام الثابت (مثل <Image src={img} layout="responsive" />) وليس الاستخدام الديناميكي (مثل <Image {...props} />).

بدلاً من ذلك، يمكنك التحديث يدويًا باتباع دليل الترحيل ورؤية أيضًا المقارنة مع الإصدار القديم.

مكون <Link>

لم يعد مكون <Link> يتطلب إضافة علامة <a> يدويًا كعنصر فرعي. تمت إضافة هذا السلوك كخيار تجريبي في الإصدار 12.2 وأصبح الآن الافتراضي. في Next.js 13، يقوم <Link> دائمًا بعرض <a> ويسمح لك بتمرير الخصائص إلى العلامة الأساسية.

على سبيل المثال:

import Link from 'next/link'

// Next.js 12: يجب تضمين `<a>` وإلا سيتم استبعاده
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` يعرض دائمًا `<a>` تلقائيًا
<Link href="/about">
  About
</Link>

لترقية روابطك إلى Next.js 13، يمكنك استخدام أداة التعديل التلقائي new-link.

مكون <Script>

تم تحديث سلوك next/script لدعم كل من pages و app. إذا كنت تقوم باعتماد app تدريجيًا، اقرأ دليل الترقية.

تحسين الخطوط

سابقًا، ساعدك Next.js في تحسين الخطوط عن طريق تضمين CSS الخطوط. يقدم الإصدار 13 وحدة next/font الجديدة التي تمنحك القدرة على تخصيص تجربة تحميل الخطوط مع ضمان أداء رائع وخصوصية.

راجع تحسين الخطوط لمعرفة كيفية استخدام next/font.