Next.js 15.2 | Next.js العربية

يتضمن Next.js 15.2 تحديثات لتصحيح الأخطاء، البيانات الوصفية (metadata)، Turbopack، والمزيد:

واجهة مستخدم جديدة للأخطاء وتحسين تتبع المكدس: تجربة تصحيح أخطاء مُعاد تصميمها
بث البيانات الوصفية (Streaming metadata): لن تعيق البيانات الوصفية غير المتزامنة (async) عرض الصفحة أو الانتقال بين الصفحات من جانب العميل
تحسينات أداء Turbopack: أوقات تجميع أسرع واستهلاك أقل للذاكرة
انتقالات العرض في React (تجريبي): دعم تجريبي لواجهة برمجة تطبيقات View Transports الجديدة في React
Middleware في Node.js (تجريبي): دعم تجريبي لاستخدام Node.js runtime في Middleware

قم بالترقية اليوم، أو ابدأ باستخدام:

Terminal

# استخدم أداة الترقية التلقائية CLI
npx @next/codemod@canary upgrade latest
 
# ...أو قم بالترقية يدويًا
npm install next@latest react@latest react-dom@latest
 
# ...أو ابدأ بمشروع جديد
npx create-next-app@latest

واجهة مستخدم جديدة للأخطاء وتحسين تتبع المكدس

لقد أضفنا تحسينات بصرية ونوعية للأخطاء التي قد تواجهها أثناء بناء تطبيقك. دعنا نستعرض كل مجال من مجالات التحسين:

نافذة الأخطاء (Error overlay)

مثال على نافذة أخطاء Next.js بعد الإصدار 15.2

لقد قمنا بإعادة تصميم واجهة المستخدم وعرض رسائل الأخطاء في Next.js، مما يجعلها أسهل في الفهم. يسلط التصميم الجديد الضوء على التفاصيل الأساسية للخطأ - مثل الرسالة، إطار الكود ذي الصلة، ومكدس الاستدعاءات - مع تقليل الضوضاء من الكود في المكتبات أو التبعيات. هذا يعني أنه يمكنك الوصول بسرعة إلى جذر المشكلة والبدء في إصلاحها بشكل أسرع.

بالاستفادة من ميزة owner stacks الجديدة في React، أصبح بإمكاننا الآن توفير دقة أعلى في تحديد مصدر الأخطاء. سيكون Next.js قادرًا الآن على عرض المكون الفرعي المسؤول عن إلقاء الخطأ، متجاوزًا العناصر الوسيطة التي لم تكن مسؤولة عن إنشاء العنصر الذي تسبب في الخطأ.

كما أننا نجعل من السهل تخصيص تفضيلات المؤشرات دون الحاجة إلى إضافة تكوين إضافي.

لقد أضفنا قسمًا للتعليقات في أسفل نافذة الأخطاء يتيح لك تقييم مدى فائدة رسالة الخطأ. يساعدنا رأيك في فهم نقاط الألم الشائعة وتحسين رسائل الأخطاء لتسهيل عملية تصحيح الأخطاء.

مؤشر التطوير (Dev indicator)

الحالات المختلفة لمؤشر التطوير، من التصيير إلى عرض معلومات إضافية.

لقد دمجنا معلومات التطوير في مؤشر جديد مبسط يعرض تفاصيل مثل وضع التصيير وحالة البناء.

أثناء التجميع، ستلاحظ شعار Next.js خافتًا ومتحركًا عند التنقل بين المسارات. يضيء الشعار بمجرد اكتمال التجميع وبدء React في التصيير، مما يوفر إشارة بصرية لحالة تطبيقك.

عند فتح مؤشر التطوير، سيتم عرض:

وضع التصيير الحالي للمسار (ثابت/ديناميكي)
حالة تجميع Turbopack
الأخطاء النشطة مع وصول سريع إلى نافذة الأخطاء

ستشمل التحديثات المستقبلية توسيع هذه القائمة لتتضمن:

أدوات تصحيح PPR (Partial Prerendering)
ميزات مراقبة الذاكرة المؤقتة (Cache)
أدوات تطوير إضافية

يوفر هذا النهج الموحد جميع معلومات التطوير الحرجة في مكان واحد يمكن الوصول إليه. سنستمر في تحسين وتوسيع هذه الميزة في الإصدارات القادمة بناءً على ملاحظاتك.

بث البيانات الوصفية (Streaming metadata)

غالبًا ما يكون من الضروري جلب بيانات ديناميكية، أو تنفيذ بعض العمليات غير المتزامنة، في generateMetadata. في الإصدارات السابقة من Next.js، كان يجب أن تكتمل عملية إنشاء هذه البيانات الوصفية قبل إرسال واجهة المستخدم الأولية حتى يمكن تضمينها في وثيقة <head>.

هذا يعني أنه بالنسبة للعديد من الصفحات التي تتوفر فيها واجهة مستخدم أولية سريعة، كان الرسم الأولي لا يزال يتأخر بسبب متطلبات البيانات التي لا تؤثر على ما سيراه المستخدم بصريًا. لقد قمنا بتحسين هذا في الإصدار 15.2 من خلال السماح بإرسال واجهة المستخدم الأولية إلى المتصفح حتى قبل اكتمال generateMetadata.

ومع ذلك، للحفاظ على التوافق مع الروبوتات ومجمعات البيانات التي تتوقع توفر البيانات الوصفية في <head> للوثيقة، فإننا نواصل تأخير إرسال HTML إلى وكلاء مستخدمين معينين للروبوتات. إذا كنت بحاجة إلى تحكم أكثر دقة في الروبوتات التي تتلقى هذه المعاملة، فيمكنك تخصيص التعبير النمطي المستخدم لخدمتها عبر خيار htmlLimitedBots في next.config.js.

تعلم المزيد عن بث البيانات الوصفية (streaming metadata).

تحسينات أداء Turbopack

تم اعتبار Turbopack مستقرًا مع Next.js 15.

لقد كنا نعمل على تحسين أداء Turbopack، خاصة في السيناريوهات التي لا تحتوي على ذاكرة تخزين مؤقت دائمة. كجزء من هذا الإصدار، قمنا بإدخال التحسينات التالية:

أوقات تجميع أسرع: أبلغ المستخدمون الأوائل عن أوقات تجميع أسرع بنسبة تصل إلى 57.6٪ عند الوصول إلى المسارات مقارنة بـ Next.js 15.1.
استهلاك أقل للذاكرة: بالنسبة لتطبيق vercel.com، لاحظنا انخفاضًا بنسبة 30٪ في استخدام الذاكرة أثناء التطوير المحلي.

مع هذه التحسينات، يجب أن يكون Turbopack الآن أسرع من Webpack في جميع الحالات تقريبًا. إذا واجهت سيناريو حيث لا يكون هذا صحيحًا لتطبيقك، يرجى التواصل معنا - نريد التحقيق في هذه الحالات.

لقد أحرزنا أيضًا تقدمًا في الذاكرة المؤقتة الدائمة وبناءات الإنتاج. على الرغم من أن هذه الميزات ليست جاهزة للإصدار التجريبي بعد، إلا أننا بدأنا في اختبارها على مشاريع واقعية. سنشارك المزيد من المقاييس التفصيلية بمجرد أن تصبح متاحة للاستخدام الأوسع.

انتقالات العرض في React (تجريبي)

لقد أضفنا علامة ميزة لتمكين واجهة برمجة تطبيقات View Transports الجديدة التجريبية في React. تتيح لك واجهة برمجة التطبيقات هذه تحريك الانتقال بين المشاهدات والمكونات المختلفة في تطبيقك.

لتمكين هذه الميزة، أضف ما يلي إلى next.config.js:

next.config.js

module.exports = {
  experimental: {
    viewTransition: true,
  },
};

ملاحظة: هذه الميزة تجريبية للغاية وقد تتغير في الإصدارات المستقبلية.

لمزيد من المعلومات حول كيفية استخدام هذه الميزة، يرجى الرجوع إلى طلب سحب View Transition الأصلي في مستودع React. يعتمد هذا العمل على التنفيذ الأصلي للمتصفح لانتقالات العرض.

سنقوم بنشر المزيد من الوثائق والأمثلة مع تقدم الاستقرار.

Middleware في Node.js (تجريبي)

لقد كنا نعمل على علامة تجريبية جديدة للسماح باستخدام Node.js runtime لـ Next.js Middleware.

لتمكين هذه الميزة، أضف ما يلي إلى next.config.js:

next.config.js

module.exports = {
  experimental: {
    nodeMiddleware: true,
  },
};

يمكنك بعد ذلك تحديد Node.js runtime في تصدير config لـ Middleware الخاص بك:

middleware.js

import bcrypt from 'bcrypt';
 
const API_KEY_HASH = process.env.API_KEY_HASH; // مفتاح API مشفر مسبقًا في البيئة
 
export default async function middleware(req) {
  const apiKey = req.headers.get('x-api-key');
 
  if (!apiKey || !(await bcrypt.compare(apiKey, API_KEY_HASH))) {
    return new Response('Forbidden', { status: 403 });
  }
 
  console.log('تم التحقق من مفتاح API');
}
 
export const config = {
  runtime: 'nodejs',
};

ملاحظة: لا يُنصح باستخدام هذه الميزة للإنتاج بعد. لذلك، سيقوم Next.js بإلقاء خطأ ما لم تكن تستخدم إصدار next@canary بدلاً من الإصدار المستقر.

نحن نخطط لاستغلال هذه الفرصة لتحسين وإعادة تشكيل واجهة برمجة تطبيقات Middleware. إذا كان لديك أي اقتراحات أو طلبات، فيرجى إعلامنا. كان Middleware في Node.js من أهم طلبات المجتمع ونحن متحمسون لمعالجة هذا الأمر.

قريبًا

"use cache" (beta): لقد كنا نعمل على تثبيت "use cache" كميزة مستقلة. ترقبوا المزيد من التفاصيل في الإصدارات القادمة. تعلم المزيد عن "use cache".
الذاكرة المؤقتة الدائمة في Turbopack (تجريبي): لقد كنا نختبر الذاكرة المؤقتة الدائمة في Vercel مع تحسينات أداء إيجابية. بمجرد تحقيق مزيد من الاستقرار، سنقوم بإصدارها خلف علامة ميزة لمزيد من التعليقات والاختبارات.

تغييرات أخرى

[ميزة] إضافة علامة --api لإنشاء واجهة برمجة تطبيقات بدون واجهة مستخدم مع create-next-app (PR)
[ميزة] إضافة دعم لـ images.qualities مع next/image (PR)
[إهلاك] تحذير حول إهلاك تكوين i18n في App Router (PR)
[تحسين] تحسين أداء lint لـ no-html-link-for-pages (PR)
[تحسين] إصدار خطأ بناء إذا تم استخدام توجيه "use action" بشكل غير صحيح (PR)
[تحسين] عرض global-error بجانب نافذة الأخطاء أثناء التطوير (PR)
[تحسين] السماح بتعطيل سجلات طلبات HTTP في خادم التطوير (PR)
[تحسين] إضافة علامات SEO للترقيم (PR)
[تحسين] تحسين JSDocs لـ metadata ومكونات <Link> (PR)
[تحسين] يجب أن يتطابق Middleware مع طلبات next/image (PR)
[تحسين] إضافة اسم المضيف إلى رسالة خطأ الحدود الافتراضية (PR)
[تحسين] إرسال الأخطاء التي لم يتم التعامل معها بواسطة حدود أخطاء صريحة عبر reportError (PR)

المساهمون

Next.js هو نتيجة العمل المشترك لأكثر من 3000 مطور فردي. تم إصدار هذا الإصدار بفضل:

فريق Next.js: Andrew، Hendrik، Janka، Jiachi، Jimmy، Jiwon، JJ، Josh، Jude، Sam، Sebastian، Sebbie، Wyatt، و Zack.
فريق Turbopack: Benjamin، Donny، Maia، Niklas، Tim، Tobias، و Will.
فريق وثائق Next.js: Delba، Rich، Ismael، و Lee.

شكرًا جزيلاً لـ @mischnic، @Marukome0743، @JamBalaya56562، @creationix، @noreiller، @styfle، @abdonrd، @ollyw، @aymericzip، @davidhu2000، @attilarepka، @devpla، @dydals3440، @huozhi، @wbinnssmith، @suu3، @PapatMayuri، @Sahil4883، @abyii، @molebox، @sokra، @maciej-ka، @abvthecity، @damiensedgwick، @alitas، @RiskyMH، @ytreister، @sommeeeer، @n1ckoates، @yongholeeme، @spidersouris، @gurkerl83، @cassiossantos، @Netail، @tknickman، @eur00t، @cseas، @nnnnoel، @Manoj-M-S، @lfades، @matmannion، @mikeboensel، @nphmuller، @apostolos، @k15a، @pavelee، @locothedev، @vexcat، @Zach-Jaensch، @decepulis، @gadcam، @lukahartwig، @jsanford8، @RobinMalfait، @raunofreiberg، @mohsen1، @skushagra، @amannn، @HQidea، @jrandolf، @smit-err، @littledivy، @k35o، @martinsione، @CvX، @msereniti، @Timer، @Iftee97، @chibicode، @RobPruzan، @PlagueFPS، @bjunix، @maximevtush، @michaelven، @sedlukha، @johannpinson، @AxelUser، @Nayeem-XTREME، @IcaroG، @blurrah، @lachlanjc، @ashi009، @conico974، @raphaelcosta، @dulmandakh، @khuezy، @Knoa0405، @wangsijie، @stefanprobst، @wentsul، @loopy-lim، @bratvanov، @hedgeday، و @cassian-goode للمساعدة!