الإصدار 13

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

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

npm i next@latest react@latest react-dom@latest eslint-config-next@latest
# أو
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
# أو
pnpm up next react react-dom eslint-config-next --latest
# أو
bun add next@latest react@latest react-dom@latest eslint-config-next@latest

ملخص الإصدار 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. يتوفر أداة تحويل تلقائي لإعادة تسمية الاستيرادات بشكل آلي وآمن.
• لم يعد من الممكن أن يكون العنصر الفرعي لـ next/link هو <a>. أضف الخاصية legacyBehavior لاستخدام السلوك القديم أو احذف <a> للترقية. يتوفر أداة تحويل تلقائي لترقية الكود تلقائيًا.
• تمت إزالة خاصية التكوين target واستبدالها بـ تتبع ملفات الإخراج.

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

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

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

مكون <Image/>

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

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

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

• 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.