Next.js 13.1

يتضمن Next.js 13.1 تحسينات لكل من دليل pages/ (المستقر) ودليل app/ (بيتا):

• تحسينات دليل app (بيتا): تحسين الموثوقية والأداء.
• تحويل الوحدات المدمج: إدماج إمكانيات next-transpile-modules في النواة.
• وقت تشغيل Edge (مستقر): وقت تشغيل Node.js خفيف للحافة.
• تحديثات Turbopack: دعم Tailwind CSS، next/image، @next/font، والمزيد.
• تحسينات Middleware: إرجاع الردود وتعيين رؤوس الطلبات.
• حل الاستيراد في SWC: لحزم JavaScript أصغر عند استخدام ملفات البرميل.
• تحسينات استخدام الذاكرة، قوالب جديدة، والمزيد! #other-improvements

قم بالتحديث اليوم عن طريق تشغيل:

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

تحسين الموثوقية ودعم دليل app

في Next.js 13، أعلنا عن دليل app الجديد (بيتا). يمكن اعتماد نظام التوجيه الجديد وجلب البيانات تدريجياً بجانب دليل pages الحالي.

يوفر دليل app العديد من المزايا، بما في ذلك تخطيطات محسنة، ووضع المكونات والاختبارات والأنماط في مكان واحد، وجلب البيانات على مستوى المكون، والمزيد. بفضل ملاحظاتك واختبارك المبكر، قمنا بالعديد من التحسينات على موثوقية دليل app:

• لا يوجد عناصر div للتخطيط: سابقاً، كان دليل app يضيف عناصر <div> إضافية لتمرير التخطيطات إلى العرض عند التنقل. مع الإصدار 13.1، لم تعد هذه العناصر الإضافية تُنشأ. مع الحفاظ على سلوك التمرير.
• إضافة TypeScript: قمنا ببناء إضافة TypeScript جديدة توفر اقتراحات لخيارات تكوين الصفحة والتخطيط، وتجلب الوثائق مباشرة إلى بيئة التطوير الخاصة بك، وتوفر تلميحات استخدام مفيدة حول مكونات الخادم والعميل (مثل منع استخدام useState في مكونات الخادم). تعلم المزيد.
• تحسينات الموثوقية: قمنا بإصلاح العديد من الأخطاء، بما في ذلك تحسين دعم وحدات CSS، وإزالة التكرارات بشكل صحيح لـ cache() و fetch() للتخطيطات والصفحات، وتسريبات الذاكرة، والمزيد.
• عدد أقل من JavaScript على جانب العميل: يحتوي دليل app الآن على 9.3kB أقل من JavaScript على جانب العميل مقارنة بدليل pages. هذا الأساس لا يزيد سواء أضفت 1 أو 1000 مكون خادم إلى تطبيقك. وقت تشغيل React مؤقتًا أكبر قليلاً، هذه الزيادة ناتجة عن وقت تشغيل مكونات خادم React، الذي يتعامل مع آليات كان Next.js يتعامل معها سابقًا. نحن نعمل على تقليل هذا أكثر.

نحن متحمسون لمواصلة التقدم في استقرار دليل app. وثائق البيتا لدليل app شهدت مئات التحديثات بناءً على ملاحظاتكم.

تحويل الوحدات المدمج (مستقر)

يمكنك الآن تحديد تبعيات من الحزم المحلية (مثل monorepos) أو من التبعيات الخارجية (node_modules) ليتم تحويلها وحزمها. هذا الدعم المدمج يحل محل الحزمة الشهيرة next-transpile-modules.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
};
 
module.exports = nextConfig;

نشكر Pierre de la Martinière (@martpie) على عمله في هذه الحزمة ومساعدته في ضمان تلبية الدعم المدمج لاحتياجات المجتمع.

حل الاستيراد لحزم أصغر

تستخدم العديد من حزم npm الشهيرة "ملفات البرميل" لتوفير ملف واحد يعيد تصدير وحدات أخرى. على سبيل المثال:

export { default as Button } from './dist/Button';
export { default as Slider } from './dist/Slider';
export { default as Dropdown } from './dist/Dropdown';

هذا يسمح لمستخدمي الحزمة باستخدام تصديرات مسماة في سطر واحد:

import { Button, Slider, Dropdown } from '@acme/ui';

بينما تفهم أدوات الحزم ملفات البرميل هذه ويمكنها إزالة التصديرات غير المستخدمة (تسمى "إزالة الكود الميت")، تتضمن هذه العملية تحليل/تجميع جميع الملفات المعاد تصديرها. في حالة المكتبات المنشورة، بعض حزم npm تشحن ملفات برميل تحتوي على آلاف الوحدات المعاد تصديرها، مما يبطئ أوقات التجميع. أوصت هذه المكتبات بـ babel-plugin-transform-imports لتجنب هذه المشكلة، ولكن لأولئك الذين يستخدمون SWC، لم يكن هناك دعم سابق. أضفنا تحويل SWC جديد مدمج في Next.js يسمى modularizeImports.

يتيح هذا الإعداد الجديد تحويل SWC الذي يغير عبارات الاستيراد الخاصة بك بناءً على نمط محدد. على سبيل المثال، سيتم تحويل الكود أعلاه لاستخدام ثلاثة مكونات تلقائيًا لاستخدام استيرادات مباشرة، دون الحاجة إلى كتابة هذا الكود يدويًا:

// قبل (مع ملف البرميل)
import { Button, Slider, Dropdown } from '@acme/ui';
 
// بعد (مع استيرادات معيارية من الإضافة)
import Button from '@acme/ui/dist/Button';
import Slider from '@acme/ui/dist/Slider';
import Dropdown from '@acme/ui/dist/Dropdown';

هذا التحويل ممكن مع خيار modularizeImports في next.config.js:

module.exports = {
  modularizeImports: {
    '@acme/ui': {
      transform: '@acme/ui/dist/{{member}}',
    },
  },
};

الاستفادة من هذا التحويل مع @mui/icons-material أو lodash يتخطى تجميع الملفات غير المستخدمة. تعلم المزيد.

شاهد عرضًا توضيحيًا لرؤية هذا في العمل.

وقت تشغيل Node.js خفيف للحافة، الآن مستقر لمسارات API

يستخدم وقت تشغيل Edge داخل Next.js مجموعة فرعية صارمة من واجهات برمجة تطبيقات Node.js (مثل Request، Response، والمزيد) المتوافقة مع منصات الحوسبة الطرفية مثل Vercel أو عند الاستضافة الذاتية. تعمل واجهات برمجة التطبيقات هذه في كل مكان، بما في ذلك المتصفح، مما يسمح للمطورين بتعلمها مرة واحدة والكتابة في كل مكان.

// لم تعد هناك حاجة إلى بادئة "experimental-"
export const config = {
  runtime: 'edge',
};
 
export default function handler(req: Request) {
  return new Response('Hello World');
}

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

مع الإصدار 13.1، أصبح وقت تشغيل Edge داخل Next.js مستقرًا الآن لمسارات API. عند الاستضافة الذاتية، سيعمل Middleware ومسارات API باستخدام وقت تشغيل Edge كحمل عمل أحادي المنطقة افتراضيًا كجزء من next start. على Vercel، يتم نشر Next.js Middleware ومسارات API عالميًا باستخدام Vercel Edge Functions لأقل زمن انتقال ممكن. أصبحت Vercel Edge Functions أيضًا متاحة الآن بشكل عام.

تحسينات Turbopack

بعد إصدار Turbopack ألفا مع Next.js 13، ركزنا على تحسين الموثوقية، وإضافة دعم لأكثر الميزات طلبًا، وتحديد خطط للإضافات والاستخدام في أطر عمل أخرى.

منذ Next.js 13.0.0، قام Turbopack بـ:

• دعم PostCSS، بما في ذلك Tailwind CSS
• دعم next/image
• دعم @next/font (خطوط Google)
• دعم تحميل CSS من عبارات import() الديناميكية
• دعم خرائط مصدر CSS (شكرًا لـ @ahabhgk على مساهمتهم)
• تحسين معالجة الأخطاء في طبقة الأخطاء next dev
• تحسين استخدام الذاكرة
• تحسين دعم وحدات CSS
• تحسين خوارزمية التجزئة لتحديثات HMR
• تحسين موثوقية خرائط مصدر HMR

نشكر Evan You ومجتمع Vite على ملاحظاتهم ومساهماتهم لضمان أن معايير Turbopack دقيقة قدر الإمكان. لقد عملنا مع فريق Vite للتحقق من أحدث معايير Turbopack وإجراء العديد من التحسينات على منهجية الاختبار الخاصة بنا.

نتيجة لهذا التعاون، نستخدم الآن مقياسًا أكثر دقة يتضمن الوقت المستغرق في آلية تحديث React. تمكنا من تحسين وقت React Fast Refresh بمقدار 30ms في Turbopack وكذلك Next.js 13.1 على webpack. أضفنا أيضًا معيارًا جديدًا لاستخدام Vite مع SWC، والذي يُظهر أداءً محسنًا مقارنة باستخدام Vite الافتراضي مع Babel. عرض المعايير المحدثة أو اقرأ عن منهجية الاختبار.

جرب إصدار Turbopack ألفا اليوم في Next.js 13 مع next dev --turbo. إذا كان لديك أي ملاحظات، أخبرنا على نقاش GitHub.

Next.js Middleware المتقدم

بفضل ملاحظاتكم، نجعل Next.js Middleware أكثر قوة من أي وقت مضى. مع الإصدار 13.1، يمكنك الآن إرجاع الردود من Middleware، وكذلك تعيين رؤوس على الطلب.

توفر تحسينات واجهة برمجة التطبيقات هذه مرونة جديدة قوية لتخصيص كل جزء من دورة حياة التوجيه في Next.js. لم يعد خيار التكوين experimental.allowMiddlewareResponseBody داخل next.config.js مطلوبًا.

يمكنك الآن تعيين رؤوس على الطلب بسهولة أكبر، وكذلك الرد مباشرة دون الحاجة إلى rewrite أو redirect:

import { NextResponse } from 'next/server';
 
export function middleware(request: Request) {
  // تحقق مما إذا كان المستخدم لديه حق الوصول...
  if (!isAuthorized(request)) {
    return NextResponse.json({ message: 'غير مصرح' });
  }
 
  // أضف رأسًا جديدًا، سيغير هذا رؤوس الطلب الواردة
  // التي يمكنك قراءتها في getServerSideProps ومسارات API
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13.1');
 
  return NextResponse.next({
    request: {
      // تطبيق رؤوس الطلب الجديدة
      headers: requestHeaders,
    },
  });
}

تعلم المزيد عن Next.js Middleware المتقدم.

تحسينات أخرى

• يدعم @next/font الآن إضافة أوزان وأنماط خطوط متعددة في نفس تعريف الخط. تعلم المزيد.
• يستخدم next/dynamic الآن بدائيات React lazy() و <Suspense>. لم يعد خيار suspense السابق مطلوبًا. مع هذه التغييرات، أصبح next/dynamic متوافقًا الآن مع دليل app.
• تم تحديث create-next-app بتصميم جديد، يتضمن الآن @next/font افتراضيًا لاستضافة الخطوط الذاتية التلقائية مع عدم وجود تحول في التخطيط. جربه مع npx create-next-app@latest أو نشر القالب.
• قمنا بالعديد من التحسينات على ملعب دليل التطبيق، الذي يعرض بعض أحدث الميزات والاتفاقيات لدليل app (بيتا) في Next.js 13. انشر نسختك الخاصة.
• أنشأنا قالب معرض صور عالي الأداء، الذي يتضمن عناصر نائبة للصور، التحميل البطيء، التحسين التلقائي، دعم لوحة المفاتيح، والمزيد. انشر نسختك الخاصة.
• أنشأنا مصدرًا لفهم كيفية ترحيل تطبيق React و Express.js مفتوح المصدر كبير إلى Next.js، بما في ذلك شرح مفصل وروابط إلى عمليات الالتزام المحددة.

المجتمع

Next.js هو نتيجة العمل المشترك لأكثر من 2,400 مطور فردي، وشركاء صناعيين مثل Google و Meta، وفريقنا الأساسي في Vercel. مع أكثر من 3.6 مليون تنزيل npm أسبوعيًا و 97,900+ نجمة على GitHub، يُعد Next.js أحد أكثر الطرق شعبية لبناء الويب.

انضم إلى المجتمع على مناقشات GitHub، Reddit، و Discord.

جاء هذا الإصدار بفضل:

• فريق Next.js: Balazs، Hannes، Jan، Jiachi، Jimmy، JJ، Josh، Sebastian، Shu، Steven، Tim، و Wyatt.
• فريق Turbopack: Alex، Donny، Justin، Leah، LongYinan، Maia، OJ، Tobias، و Will.

و مساهمات: @aarnadlr، @aaronbrown-vercel، @aaronjy، @abayomi185، @ademilter، @adictonator، @adilansari، @adtc، @alantoa، @aleksa-codes، @alfred-mountfield، @alpha-xek، @andarist، @andykenward، @anujssstw، @artdevgame، @artechventure، @arturbien، @aziyatali، @bennettdams، @bertho-zero، @blue-devil1134، @bot08، @brkalow، @brvnonascimento، @chanceaclark، @chibicode، @chrisipanaque، @chunsch، @colinking، @craigwheeler، @ctjlewis، @cvolant، @danmindru، @davidnx، @delbaoliveira، @devvspaces، @dtinth، @ducanhgh، @duncanogle، @ethomson، @fantaasm، @feugy، @fomichroman، @gruz0، @haschikeks، @hughlilly، @idoob، @iiegor، @imranbarbhuiya، @ingovals، @inokawa، @ishaqibrahimbot، @ismaelrumzan، @jakemstar، @janicklas-ralph، @jaredpalmer، @jaykch، @jimcresswell، @joliss، @josephcsoti، @joshuaslate، @joulev، @jueungrace، @juliusmarminge، @karlhorky، @kikobeats، @kleintorres، @koenpunt، @koltong، @kosai106، @labyrinthitis، @lachlanjc، @laityned، @leerob، @leoortizz، @lorenzobloedow، @lucasassisrosa، @m7yue، @manovotny، @marcus-rise، @matthew-heath، @mattpr، @maxleiter، @maxproske، @meenie، @mmaaaaz، @mnajdova، @moetazaneta، @mrkldshv، @nathanhammond، @nekochantaiwan، @nfinished، @niedziolkamichal، @nocell، @notrab، @nuta، @nutlope، @obusk، @orionmiz، @peraltafederico، @reshmi-sriram، @reyrodrigez، @rightones، @rishabhpoddar، @saseungmin، @serkanbektas، @sferadev، @silvioprog، @sivtu، @soonoo، @sqve، @steven-tey، @sukkaw، @superbahbi، @teobler، @theevilhead، @thomasballinger، @timeyoutakeit، @valentinh، @ws-jm، @wxh06، @yasath، @yutsuten، و @zekicaneksi.