Next.js 10.2 | Next.js

ما هیجان زده هستیم که Next.js 10.2 را معرفی کنیم که شامل:

امروز با راه اندازی به روز رسانی کنید npm i next@latest.

با Next.js 10.1، ما Fast Refresh را بهبود بخشیده و زمان نصب را کاهش داده ایم. ما برای به اشتراک گذاشتن بهبودهای عملکرد اضافی که توسط webpack 5 فعال شده است، هیجان زده هستیم.

امروز، توزیع webpack 5 را به برنامه های Next.js گسترش می دهیم. با شروع Next.js 10.2، همه برنامه‌هایی که از پیکربندی بسته وب سفارشی در خود استفاده نمی‌کنند next.config.js به طور خودکار از وب پک 5 استفاده می کند.

هنگامی که وب پک 5 فعال می شود، به طور خودکار ویژگی ها و پیشرفت های جدیدی مانند:

• حافظه پنهان دیسک بهبود یافته: حافظه پنهان دیسک به کامپایلر اجازه می دهد تا کار خود را بین این دو ادامه دهد next build runs away فقط فایل‌های تغییر یافته مجدداً کامپایل می‌شوند و در نتیجه کارایی افزایش می‌یابد. مقیاس مشتری ورسل مشاهده شده a شتاب 63 درصد در ساخت های بعدی
• به روز رسانی سریع بهبود یافته: Next.js اکنون ساخت مربوط به Fast Refresh را در اولویت قرار می‌دهد و در نتیجه هر بار 100 تا 200 میلی‌ثانیه به‌روزرسانی سریع‌تر می‌شود.
• بهبود حافظه پنهان دارایی بلند مدت: خروجی بین مجموعه next build اجراها در حال حاضر قطعی است و باعث بهبود حافظه پنهان مرورگر دارایی های جاوا اسکریپت در تولید می شود. هنگامی که محتوای صفحه تغییر نمی کند، هش ها یکسان نگه داشته می شوند.
• لرزش درختان بهبود یافته: ماژول های CommonJS اکنون می توانند درخت تکان داده شوند تا به طور خودکار کدهای استفاده نشده حذف شوند. تجزیه و تحلیل استاتیک برای تعیین ماژول های بدون عوارض جانبی استفاده می شود. export * اطلاعات بیشتر را ردیابی می کند و دیگر صادرات پیش فرض را به عنوان استفاده علامت گذاری نمی کند. تکان دادن درخت ماژول داخلی نیز فعال است، و اجازه می دهد وارداتی که فقط در صادرات استفاده نشده استفاده می شود، به درخت تکان داده شود.

ما سخت کار کرده‌ایم تا انتقال هموار از webpack 4 به 5 را تضمین کنیم. بسته آزمایشی هسته Next.js با بیش از 3400 تست ادغام در هر درخواست دانلود با فعال بودن پشتیبانی وب پک 5 اجرا می شود.

اگر برنامه شما دارای پیکربندی بسته وب سفارشی است، توصیه می‌کنیم برای فعال کردن وب‌پک 5 مستندات را دنبال کنید. پس از ارتقاء به بسته وب 5 در Next.js، لطفاً هر گونه بازخوردی را با ما در میان بگذارید.

ما مقداردهی اولیه CLI Next.js را با ایجاد زمان اجرا بهبود بخشیده ایم next dev به 24 درصد سریعتر بعد از اولین اجرا برای مثال، next dev برای vercel.com از 3.3 به 2.5s رسید.

ما در یک ماموریت هستیم که تجربه توسعه محلی شما را در زمان واقعی ایجاد کنیم (20 برابر سریعتر). انتظار بهبود عملکرد راه اندازی بیشتر در نسخه های آینده را داشته باشید.

تغییرات مسیر اکنون به طور پیش فرض به صفحه خوان ها و سایر فناوری های کمکی گزارش می شود.

مثال زیر عنوان “داده های واقعی. عملکرد واقعی” را نشان می دهد که توسط macOS VoiceOver در طی ناوبری سمت مشتری اعلام شده است. نام صفحه ابتدا با جستجو پیدا می شود element, falling back to document.titleو در نهایت به نام مسیر.

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)',
          },
        ],
        destination: '/old-browser',
        permanent: false,
      },
    ];
  },
};

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB',
          },
        ],
        destination: '/uk/:path*',
        permanent: true,
      },
    ];
  },
};

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?yes|true)',
          },
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false,
      },
    ];
  },
};

// Before
link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
 
// After
style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    -- ... -->
  }
style>