Next.js 11.1 | Next.js

ما در حال بهبود عملکرد ساخت در سراسر پشته با Next.js 11.1 هستیم، از جمله:

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

تیم Next.js با محققان و حسابرسان امنیتی برای جلوگیری از آسیب‌پذیری‌ها کار می‌کند. ما از Gabriel Benmergui از Robinhood برای تحقیق و کشف یک تغییر مسیر باز با pages/_error.js و متعاقب آن افشای مسئولانه

مشکل گزارش شده مستقیماً به کاربران آسیب نمی رساند، اما می تواند با هدایت مجدد به دامنه مهاجم از یک دامنه مورد اعتماد، حملات فیشینگ را مجاز کند. ما یک اصلاح در Next.js 11.1 قرار داده ایم که از وقوع این تغییر مسیر باز و همچنین تست رگرسیون برای امنیت جلوگیری می کند.

برای جزئیات بیشتر، لطفا CVE عمومی را بخوانید. توصیه می کنیم برای بهبود امنیت کلی برنامه خود، به آخرین نسخه Next.js ارتقا دهید. برای گزارش‌های افشای مسئولانه آتی، به ما ایمیل بزنید security@vercel.com.

توجه: برنامه های Next.js میزبانی شده در Vercel تحت تاثیر قرار نمی گیرند از این آسیب پذیری (و بنابراین، هیچ اقدامی لازم نیست برای برنامه های Next.js شما که روی Vercel اجرا می شوند.

ما در حال کار بر روی پشتیبانی گسترده از ماژول های ES در Next.js، هم به عنوان ماژول های ورودی و هم به عنوان اهداف خروجی هستیم. با شروع با Next.js 11.1، اکنون می توانید بسته های npm را با استفاده از ماژول های ES وارد کنید (به عنوان مثال "type": "module" در مال آنها package.json) با یک پرچم آزمایشی.

module.exports = {
  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: true },
};

پشتیبانی از ماژول های ES شامل سازگاری به عقب برای حفظ رفتار واردات قبلی CommonJS است. در Next.js 12، esmExternals: true پیش فرض خواهد شد. توصیه می‌کنیم گزینه جدید را امتحان کنید و اگر پیشنهادی برای بهبود دارید، در بحث‌های GitHub بازخورد بگذارید.

ما روی ادغام SWC کار می کنیم، یک کامپایلر فوق سریع جاوا اسکریپت و TypeScript که با Rust نوشته شده است و جایگزین دو زنجیره ابزار مورد استفاده در Next.js می شود: Babel برای فایل های فردی و Terser برای کوچک کردن بسته های خروجی.

به‌عنوان بخشی از جایگزینی Babel با SWC، ما همه تبدیل‌های کد سفارشی را که Next.js استفاده می‌کند به تبدیل‌های SWC نوشته شده در Rust برای به حداکثر رساندن عملکرد منتقل می‌کنیم. به عنوان مثال، یک درخت کدهای استفاده نشده را در داخل تکان می دهد getStaticProps، getStaticPaths، و getServerSideProps.

به‌عنوان بخشی از جایگزینی Terser، ما در حال کار بر روی اطمینان از اینکه مینی‌فایر SWC دارای خروجی مشابه Terser است، کار می‌کنیم، در حالی که عملکرد کوچک‌سازی و موازی‌سازی را به طور قابل‌توجهی بهبود می‌بخشیم.

در آزمایشات اولیه، تبدیل کدهای قبلی با استفاده از Babel ناموفق بود ~500ms تا ~10ms و کوچک سازی کد توسط Terser حذف شد ~250ms تا~30ms با کمک SWC به طور کلی این منجر به ساخت دو برابر سریعتر.

ما هیجان زده هستیم که اعلام کنیم دونگ یون کانگ، خالق SWC، و مایا تیگاردن، یکی از مشارکت کنندگان Parcel، به تیم Next.js در Vercel پیوسته اند تا روی بهبود هر دو کار کنند. next dev و next build اجرا ما نتایج بیشتری را از پذیرش SWC در نسخه بعدی که پایدار شد به اشتراک خواهیم گذاشت.

لینک را به عنوان کپی کنیدهمچنین یک تقویت کننده استخراج داده می سازد

هنگام استفاده next build و با ایجاد چندین درخواست HTTP، ما هستیم بهبود عملکرد ~ 2 برابر متوسط مثلا اگر استفاده می کنید getStaticProps و getStaticPaths برای استخراج محتوا از Headless CMS، باید ساخت‌های بسیار سریع‌تری ببینید.

Next.js استخراج گره را به صورت خودکار پر می کند و اکنون HTTP Keep-Alive را به طور پیش فرض فعال می کند. با توجه به معیارهای خارجی، این باید پیش رندر شود ~ 2 برابر سریعتر.

برای غیرفعال کردن HTTP Keep-Alive حتما fetch() تماس می گیرد، می توانید گزینه نماینده را اضافه کنید:

import { Agent } from 'https';
const url = '';
const agent = new Agent({ keepAlive: false });
fetch(url, { agent });

برای لغو همه fetch() تماس در سراسر جهان، شما می توانید استفاده کنید next.config.js:

module.exports = {
  httpAgentOptions: {
    keepAlive: false,
  },
};

لینک را به عنوان کپی کنیدنقشه های خروجی

از جمله نقشه‌های منبع مرورگر در برنامه‌های Next.js به دلیل بهینه‌سازی دارایی‌های بسته وب و پردازش نقشه منبع، اکنون حدود 70 درصد سربار عملکرد کمتر و حدود 67 درصد سربار حافظه کمتر است.

این فقط بر برنامه های Next.js با تأثیر می گذارد productionBrowserSourceMaps: true در مال آنها next.config.js file.با Next.js 11.1، زمانی که نقشه های منبع فعال هستند، زمان ساخت تنها 11 درصد افزایش می یابد.

ما همچنین با Sentry کار کردیم تا عملکرد بارگذاری نقشه خروجی را با افزونه Sentry Next.js افزایش دهیم.

در Next.js 11، پشتیبانی داخلی برای ESLint از طریق معرفی کردیم next lint.از زمان انتشار اولیه، به افزودن قوانینی ادامه داده ایم که به توسعه دهندگان کمک می کند تا اشکالات رایج برنامه های خود را برطرف کنند.

لینک را به عنوان کپی کنیدقوانین دسترسی پیش فرض

قوانین دسترس‌پذیری بهتر اکنون به‌طور پیش‌فرض فعال شده‌اند و از مشکلات مربوط به ویژگی‌های ARIA که با یکدیگر مطابقت ندارند و استفاده از ویژگی‌های ARIA غیرموجود جلوگیری می‌کند. این قوانین به طور پیش فرض هشدار می دهند.

با تشکر ویژه از مشارکت کننده جامعه جفرسون بلدسو برای افزودن این قوانین.

لینک را به عنوان کپی کنیداشتباهات تایپی رایج

پرده زدن برای اشتباهات رایج املایی در getStaticProps، getStaticPaths، و getServerSideProps اکنون به طور پیش فرض هشدار می دهد. این به مواردی کمک می کند که یک اشتباه تایپی کوچک باعث شود که واکشی داده ها فراخوانی نشود. به عنوان مثال getstaticprops یا getStaticprops یک اخطار نشان خواهد داد.

تشکر ویژه از مشارکت کننده جامعه kaykdm برای ایجاد این قانون.

ما در حال جمع‌آوری بازخوردهای جامعه بوده‌ایم next/image و بهینه سازی داخلی تصویر، و ما هیجان زده هستیم که مجموعه ای از بهبودها را در عملکرد، تجربه توسعه دهنده و تجربه کاربر به اشتراک بگذاریم.

لینک را به عنوان کپی کنیدبهینه سازی تصویر

به‌طور پیش‌فرض، Next.js از WebAssembly برای بهینه‌سازی تصویر استفاده می‌کند، که زمان نصب بسته Next.js را با کوچک‌تر بودن و نداشتن مرحله پس از نصب جبران می‌کند. با Next.js 11.1، می توانید به صورت اختیاری نصب کنید sharp که زمان تولید تصاویر غیر ذخیره‌شده را در مقایسه با نصب کندتر بهینه می‌کند.

بهینه ساز تصویر مبتنی بر WebAssembly برای پشتیبانی از تراشه های ARM مانند Apple M1 با Node.js 16 به روز شده است.

بهینه ساز داخلی تصویر اکنون به طور خودکار نوع محتوای خارجی یک تصویر را بر اساس محتوای بدنه پاسخ تشخیص می دهد. این به Next.js اجازه می دهد تا تصاویر میزبانی شده در AWS S3 را زمانی که هدر پاسخ است بهینه کند Content-Type: application/octet-stream .

لینک را به عنوان کپی کنیدنسل تنبل Blur Up Placeholders در حال توسعه است

در طول next dev وارد کردن تصویر استاتیک با placeholder="blur" اکنون به طور خودکار به تعویق می‌افتند و زمان راه‌اندازی سرور را برای توسعه‌دهندگان برای برنامه‌هایی با بسیاری از تصاویر ثابت وارد شده بهبود می‌بخشد:

import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // The placeholder for this image is lazy-generated during development
    Image src={author} alt="Picture of the author" placeholder="blur" />
  );
}

لینک را به عنوان کپی کنیدسایر بهبودهای تصویر

• تصاویری که قبلاً بارگذاری شده‌اند دیگر بارگذاری با تأخیر انجام نمی‌شوند: زمانی که تصویری قبلاً در صفحه بارگذاری شده باشد، یا از طریق ناوبری مشتری یا بارگیری آن در نقطه دیگری از صفحه، Next.js اکنون به طور خودکار از بارگیری تاخیری رد می شود تا قبل از نمایش تصویر به سرعت چشمک نزند.
• پشتیبانی از بارگذاری سفارشی تصاویر با next export: next/image اکنون از استفاده پشتیبانی می کند next export همراه با هر سرویس بهینه سازی تصویر شخص ثالث. می توانید پیکربندی کنید images.loader: "custom" ج next.config.js زمانی که قصد ارائه سفارشی را دارید loader پشتیبانی از next/image.
• رویداد بارگذاری تصویر جدید: بر اساس بازخورد کاربران، یک ویژگی جدید اضافه کردیم onLoadingComplete به next/image. این امکان ثبت تماسی را فراهم می کند که پس از بارگیری کامل تصویر فراخوانی می شود.
• پیکربندی پیش‌فرض حافظه پنهان تصویر TTL (زمان زنده بودن): اکنون می توانید پیکربندی کنید images.minimumCacheTTL ج next.config.js برای تغییر TTL کش پیش فرض برای تصاویر بهینه شده. در صورت امکان، توصیه می کنیم از یک تصویر ثابت استفاده کنید imports زیرا آنها به طور خودکار از حداکثر TTL استفاده می کنند زیرا هش محتوای تصویر در URL است.

Next.js نتیجه کار ترکیبی بیش از 1700 توسعه دهنده فردی، شرکای صنعتی مانند Google و Facebook و تیم اصلی ما است.

ما مفتخریم که این جامعه همچنان در حال رشد است. تنها در شش ماه گذشته، شاهد افزایش 50 درصدی دانلود Next.js در NPM بوده‌ایم، از 4.1 میلیون به 6.2 میلیون، و تعداد صفحات اصلی با استفاده از Next.js در 10000 برتر الکسا 50 درصد افزایش یافته است.

این نسخه توسط مشارکت‌های زیر برای شما آورده شده است: @abotsi، @adam-cowley، @afbarbaro، @akellbl4، @AndreVarandas، @andys-github، @angeloashmore، @apuyou، @arturmuller، @AryanBeezadhur، @atcastle، @borekbre، @17،8، @varandonch. @ctbarna، @ctjlewis، @darshkpatel، @delbaoliveira،، @jviide، @karlsander، @kasipavankumar، @kaykdm، @kdy1، @kylemh، @leerob، @LetItRock، @lsndr، @lucleray، @m-abdelwahab، @bun abdelwahab، @rady,lormic @michielvangendt، @Munawwar، @mvasilkov، @NickCrews، @NickKelly1، @noahweingand، @noreiller، @nyedidikeke، @omasher، @orta، @pa-rang، @padmaia، @papaponmx، @PaulvdDool، @prawerq1، @petermeks @raon0211، @reod، @rishabhpoddar، @roim، @Ryz0nd، @sa3dany، @sachinraja، @samrobbins85، @schoenwaldnils، @schultzp2020، @sedlukha،، @yunger7، @zackdotcomputer، @zeek