الإصدار 12 من Next.js

كما أعلنا في Next.js Conf، يُعتبر Next.js 12 أكبر إصدار لدينا على الإطلاق:

• مُترجم Rust: تحديث سريع أسرع بـ ~3 مرات وبناء أسرع بـ ~5 مرات
• وظائف Middleware (بيتا): تمكين المرونة الكاملة في Next.js باستخدام التعليمات البرمجية بدلاً من التكوين
• دعم React 18: واجهات برمجة التطبيقات الأصلية لـ Next.js مدعومة الآن، بالإضافة إلى Suspense
• دعم <Image /> لتنسيق AVIF: اختياري لصور أصغر بنسبة 20%
• الاسترجاع التلقائي لـ ISR مع مراعاة الروبوتات: تحسين محركات البحث لمحركات الزحف
• دعم وحدات ES الأصلية: التوافق مع نظام الوحدات القياسي
• استيراد من URL (ألفا): استيراد الحزم من أي عنوان URL، دون الحاجة إلى تثبيت
• مكونات خادم React (ألفا): جرّبها اليوم، بما في ذلك البث من جانب الخادم (SSR)

قم بالتحديث اليوم عن طريق تشغيل npm i next@latest.

بناء أسرع وتحديث سريع مع مُترجم Rust

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

يعتمد مُترجم Rust لدينا على SWC، وهو منصة مفتوحة لأدوات الجيل التالي السريعة. لقد قمنا بتحسين الحزم والتجميع مع تحديث سريع أسرع بـ ~3 مرات محليًا وبناء أسرع بـ ~5 مرات للإنتاج. تشمل التحسينات والميزات الأخرى:

نتائج استخدام مُترجم Rust الجديد مع قواعد كود Next.js كبيرة.

• مزيد من تحسينات السرعة لقواعد الكود الكبيرة: لقد اختبرنا مُترجم Rust مع بعض أكبر قواعد كود Next.js في العالم.
• تحسين إمكانية مراقبة الأداء: يُخرج Next.js الآن توقيت التحديث السريع في وحدة التحكم لكل من تجميع العميل والخادم، بما في ذلك عدد الوحدات والملفات المترجمة.
• تحسينات أساسية في webpack: قمنا بالعديد من التحسينات على webpack، بما في ذلك تحسين التحديث السريع وجعل الإدخالات عند الطلب أكثر موثوقية.

يُعد التجميع باستخدام Rust أسرع بـ 17 مرة من Babel وهو مفعّل افتراضيًا في Next.js 12، ليحل محل تحويل ملفات JavaScript وTypeScript. وهذا يعني أننا اضطررنا إلى تحويل تحويلات Babel في Next.js إلى Rust، بما في ذلك محلل CSS جديد بالكامل في Rust المُستخدم لتنفيذ تحويل styled-jsx.

المُترجم الجديد لـ Rust متوافق مع الإصدارات السابقة. إذا كان لديك تكوين Babel موجود، فسيتم إلغاء الاشتراك تلقائيًا. لدينا خطط لتحليل المكتبات الشهيرة مثل styled-components وemotion وrelay قريبًا. إذا كنت تستخدم إعداد Babel مخصصًا، يرجى مشاركة تكوينك.

يمكنك أيضًا اختيار استخدام مُترجم Rust للتصغير. هذا أسرع بـ 7 مرات من Terser. يظل التصغير اختياريًا حتى يتم التحقق منه بدقة حيث يحل محل بنية تحتية عمرها سنوات.

module.exports = {
  swcMinify: true,
};

بالإضافة إلى تعيين دونغ يون كانغ، مبتكر SWC، ومايا تيجاردن، مساهمة في Parcel، نستمر في الاستثمار في نظام Rust البيئي. إذا كان لديك خبرة في العمل مع Rust، يرجى التقدم للانضمام إلى فريقنا.

لمزيد من المعلومات، شاهد عرضنا التوضيحي من Next.js Conf.

تقديم وظائف Middleware

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

تمنحك Middleware مرونة كاملة داخل Next.js.

يمكن استخدام Middleware لأي شيء يتشارك المنطق لمجموعة من الصفحات، بما في ذلك:

• المصادقة
• حماية من الروبوتات
• إعادة التوجيه
• إعادة الكتابة
• علامات الميزات واختبارات A/B
• متطلبات التوجيه المتقدم للتدويل (i18n)
• والمزيد!

تستخدم Middleware وقت تشغيل صارم يدعم واجهات برمجة تطبيقات الويب القياسية مثل fetch. يعمل هذا مباشرة باستخدام next start، وكذلك على منصات الحافة مثل Vercel، التي تستخدم Edge Middleware.

لاستخدام Middleware في Next.js، يمكنك إنشاء ملف pages/_middleware.js. في هذا المثال، نستخدم استجابة واجهة برمجة تطبيقات الويب القياسية (MDN):

export function middleware(req, ev) {
  return new Response('Hello, world!');
}

لمزيد من المعلومات، شاهد عرضنا التوضيحي من Next.js Conf وتحقق من الوثائق.

التحضير لـ React 18

ستضيف React 18 ميزات مثل Suspense، والتجميع التلقائي للتحديثات، وواجهات برمجة التطبيقات مثل startTransition، وواجهة برمجة تطبيقات جديدة للبث من جانب الخادم مع دعم React.lazy.

لقد عملنا بشكل وثيق مع فريق React في فيسبوك للتحضير لـ Next.js لـ React 18 مع اقترابها من الإصدار المستقر. نجعل هذه الميزات متاحة للتجربة اليوم في Next.js 12 تحت علامة تجريبية.

npm install react@alpha react-dom@alpha

البث من جانب الخادم

تشمل ميزات التزامن في React 18 دعمًا مدمجًا لـ Suspense من جانب الخادم ودعم البث لـ SSR. يتيح لك ذلك عرض الصفحات من جانب الخادم باستخدام بث HTTP. هذه ميزة تجريبية في Next.js 12، ولكن بمجرد تمكينها، سوف يستخدم SSR نفس وقت التشغيل الصارم مثل Middleware.

للتمكين، استخدم العلامة التجريبية concurrentFeatures: true:

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

مكونات رياكت من جانب الخادم (React Server Components)

تسمح لنا مكونات رياكت من جانب الخادم (React Server Components) بعرض كل شيء، بما في ذلك المكونات نفسها، على الخادم. هذا يختلف جوهريًا عن العرض من جانب الخادم (SSR) حيث يتم إنشاء HTML مسبقًا على الخادم. مع مكونات الخادم، لا حاجة لأي جافاسكريبت من جانب العميل، مما يجعل عرض الصفحة أسرع. هذا يحسن تجربة المستخدم لتطبيقك، حيث يجمع بين أفضل مميزات العرض من الخادم مع التفاعلية من جانب العميل.

module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true,
  },
};

يسمح لك Next.js الآن بجلب البيانات على مستوى المكون، كلها معبر عنها كـ JSX. باستخدام مكونات رياكت من الخادم، يمكننا تبسيط الأمور. لم تعد هناك حاجة لوظائف خاصة مثل getServerSideProps أو getStaticProps. هذا يتوافق مع نموذج React Hooks في وضع جلب البيانات مع مكوناتك.

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

نحن نعمل حاليًا على Suspense من جانب الخادم، والتمهيد الانتقائي (selective hydration)، والعرض المتدفق (streaming rendering) في Next.js وسنشارك تقدمنا في منشور مدونة مستقبلي.

شكر خاص لمتعاونينا Kara Erickson و Gerald Monaco من فريق Google Aurora على عملهم في رياكت 18 ومكونات الخادم.

لمزيد من المعلومات، شاهد عرضنا التوضيحي من Next.js Conf و اطلع على الوثائق.

دعم وحدات ES واستيراد URL

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

يدفع هذا المعيار نظام الويب إلى الأمام من خلال تمكين أحجام حزم وحزم جافاسكريبت أصغر، مما يؤدي في النهاية إلى تجربة مستخدم أفضل. بينما ينتقل نظام جافاسكريبت من Common JS (المعيار القديم) إلى وحدات ES، نحن ملتزمون بمساعدة المطورين على تبني هذه التحسينات تدريجيًا دون تغييرات غير ضرورية.

بدءًا من Next.js 11.1، أضفنا دعمًا تجريبيًا لوحدات ES مع إعطائها الأولوية على وحدات CommonJS. في Next.js 12، أصبح هذا هو الإعداد الافتراضي. لا يزال دعم استيراد وحدات NPM التي توفر فقط CommonJS متاحًا.

استيراد URL

يتضمن Next.js 12 دعمًا تجريبيًا لاستيراد وحدات ES عبر عناوين URL، دون الحاجة إلى تثبيت أو خطوة بناء منفصلة.

يسمح استيراد URL باستخدام أي حزمة مباشرة عبر عنوان URL. هذا يمكّن Next.js من معالجة موارد HTTP(S) البعيدة تمامًا مثل التبعيات المحلية.

إذا تم اكتشاف استيراد URL، سيقوم Next.js بإنشاء ملف next.lock لتتبع الموارد البعيدة. يتم تخزين عمليات استيراد URL محليًا لضمان إمكانية العمل دون اتصال بالإنترنت. يدعم Next.js استيراد URL من جانب العميل والخادم.

لتفعيل هذه الميزة، أضف بادئات URL المسموح بها داخل next.config.js:

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev'],
  },
};

ثم يمكنك استيراد الوحدات مباشرة من عناوين URL:

import confetti from 'https://cdn.skypack.dev/canvas-confetti';

أي CDN يقدم وحدات ES سيعمل، بما في ذلك أدوات التصميم وعدم البرمجة مثل Framer:

• Skypack
• esm.sh
• jsDelivr
• JSPM
• unpkg

لمزيد من المعلومات، شاهد عرضنا التوضيحي من Next.js Conf و اطلع على الوثائق.

الاسترجاع الذكي للزاحف (Bot-Aware ISR Fallback)

حاليًا، التجديد الثابت التدريجي (ISR) مع fallback: true يعرض حالة استرجاع قبل عرض محتويات الصفحة عند الطلب الأول لصفحة لم يتم إنشاؤها بعد. لمنع تحميل الصفحة (العرض من الخادم)، ستحتاج إلى استخدام fallback: 'blocking'.

في Next.js 12، ستقوم الزواحف (مثل بوتات البحث) تلقائيًا بعرض صفحات ISR من الخادم باستخدام fallback: true، مع الاستمرار في تقديم سلوك حالة الاسترجاع السابقة لوكلاء المستخدم غير الزواحف. هذا يمنع الزواحف من فهرسة حالات التحميل.

صور أصغر باستخدام AVIF

تدعم واجهة برمجة التطبيقات المدمجة لتحسين الصور الآن صور AVIF، مما يتيح صورًا أصغر بنسبة 20٪ مقارنة بـ WebP.

قد تستغرق صور AVIF وقتًا أطول للتحسين مقارنة بـ WebP، لذا نجعل هذه الميزة اختيارية باستخدام خاصية images.formats الجديدة في next.config.js:

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

يتم استخدام قائمة التنسيقات هذه لتحديد تنسيق الصورة المحسن عند الطلب باستخدام رأس Accept للطلب. نظرًا لأن AVIF يأتي أولاً، سيتم تقديمه إذا كان المتصفح يدعم AVIF. إذا لم يكن كذلك، سيتم تقديم WebP إذا كان المتصفح يدعم WebP. إذا لم يكن أي من التنسيقين مدعومًا، سيتم تقديم تنسيق الصورة الأصلي.

تتبع ملفات الإخراج (Output File Tracing)

في Next.js 8، قدمنا خيار target. هذا سمح بإخراج صفحات Next.js كحزم جافاسكريبت مستقلة عن طريق تجميع جميع التبعيات باستخدام webpack أثناء البناء. أدركنا سريعًا أن هذا ليس مثاليًا وقمنا بدلاً من ذلك بإنشاء @vercel/nft. تم استخدام @vercel/nft لأكثر من عامين في جميع النشرات على منصة Vercel.

الآن، نقدم هذه التحسينات مباشرة في إطار عمل Next.js افتراضيًا، لجميع منصات النشر، مما يوفر نهجًا محسنًا بشكل كبير مقارنة بخيار target.

يتتبع Next.js 12 تلقائيًا الملفات المطلوبة لكل صفحة ومسار API باستخدام @vercel/nft، ويخرج نتائج التتبع بجوار إخراج next build، مما يسمح للمتكاملين بالاستفادة من التتبع الذي يوفره Next.js تلقائيًا.

هذه التغييرات تحسن أيضًا التطبيقات التي يتم نشرها باستخدام أدوات مثل Docker عبر next start. من خلال الاستفادة من @vercel/nft، سنتمكن من جعل إخراج Next.js مستقبليًا قائمًا بذاته. لن تكون هناك حاجة لتثبيت أي تبعيات لتشغيل التطبيق، مما يقلل بشكل كبير من حجم صورة Docker.

إدخال @vercel/nft إلى Next.js يحل محل نهج target، مما يجعل target مهملاً في Next.js 12. اطلع على الوثائق لمزيد من المعلومات.

تحسينات أخرى

• إضافة pages/_app.js أو pages/_document.js إلى تطبيقك يستبدل الآن الإصدار المدمج تلقائيًا دون الحاجة إلى إعادة تشغيل واجهة سطر أوامر Next.js.
• تكامل ESLint يدعم الآن التحقق من الأخطاء في ملف واحد في next lint مع علم --file.
• يدعم Next.js 12 الآن تعيين مسار مخصص لـ tsconfig.json.
• يتم الآن دعم next.config.mjs لكتابة التكوين كوحدات ES.
• يتم الآن إلغاء تكرار الطلبات الجارية لـ getStaticProps.
• يتم الآن التحقق من الصفحات الثابتة باستخدام مجموعة مشتركة من العمال.
• يستخدم Fast Refresh الآن اتصال WebSocket بدلاً من اتصال EventSource.

تغييرات غير متوافقة مع الإصدارات السابقة

• بعد جعل webpack 5 هو الافتراضي في Next.js 11، قمنا الآن بإزالة webpack 4 رسميًا. لقد عملنا بشكل وثيق مع المجتمع لضمان انتقال سلس إلى webpack 5.
• لم يعد هناك حاجة لـ target في next.config.js.
• يستخدم next/image الآن عنصر span كعنصر تغليف بدلاً من div.
• تم تحديث الحد الأدنى لإصدار Node.js من 12.0.0 إلى 12.22.0، وهو أول إصدار من Node.js يدعم وحدات ES الأصلية.

لمعرفة المزيد، راجع دليل الترقية.

المجتمع

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

Next.js هو نتيجة العمل المشترك لأكثر من 1800 مطور فردي، وشركاء صناعيين مثل Google وFacebook، وفريقنا الأساسي.

ساهم في هذا الإصدار: @ka2n, @housseindjirdeh, @rojserbest, @lobsterkatie, @thibautsabot, @javivelasco, @sokra, @rishabhpoddar, @kdy1, @huozhi, @georgegach, @ionut-botizan, @paul-creates, @TimBarley, @kimizuy, @devknoll, @matamatanot, @christianvuerings, @pgrodrigues, @mohamedbhy, @AlfonzAlfonz, @kara, @molebox, @angelopoole, @oste, @genetschneider, @jantimon, @kyliau, @mxschmitt, @PhattOZ, @finn-orsini, @kriswuollett, @harryheman, @GustavoEdinger, @AryanBeezadhur, @Blevs, @colevscode, @atcastle, @ijjk, @velocity23, @jonowu, @timneutkens, @whitep4nth3r, @micro-chipset, @TyMick, @padmaia, @arthurdenner, @vitorbal, @zNeb, @jacksonhardaker, @shuding, @kylemh, @Bundy-Mundi, @ctjlewis, @thien-do, @leerob, @Dev-CasperTheGhost, @janicklas-ralph, @rezathematic, @KonstHardy, @fracture91, @lorensr, @Sheraff, @HaNdTriX, @emilio, @oluan, @ddzieduch, @colinclerk, @x4th, @volcareso, @oiva, @sinchang, @scottrepreneur, @smakosh, @catnose99, @adrienharnay, @donsn, @andersonleite, @msp5382, @tim-hanssen, @appsplash99, @alexvilchis, @RobEasthope, @royal, @Perry-Olsson, @well-balanced, @mrmckeb, @buraksakalli, @espipj, @prateekbh, @AleksaC, @eungyeole, و @rgabs