الإصدار 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. يتوفر أداة تحويل تلقائي لإعادة تسمية الاستيرادات بشكل آلي وآمن.
• لم يعد من الممكن أن يكون العنصر الفرعي لـ 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.