Next.js 9.2 | Next.js

admin4 روز پیش

0 2 خواندن این مطلب 7 دقیقه زمان میبرد

امروز ما مشتاق معرفی Next.js 9.2 هستیم که شامل موارد زیر است:

همه این مزایا یکپارچه و کاملاً با عقب سازگار هستند. تنها کاری که برای به روز رسانی باید انجام دهید این است که:

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

لینک را به عنوان کپی کنیدپشتیبانی از CSS داخلی برای استایل شیت های جهانی

Next.js 5 پشتیبانی برای وارد کردن CSS از طریق یک افزونه سفارشی به نام معرفی کرد next-css که رفتار Next.js را گسترش داد.

با گذشت زمان، بازخورد ثابتی از شرکت‌ها و کاربران Next.js دریافت کرده‌ایم که در نهایت به آن‌ها اضافه می‌کنند. next-css استفاده از آنها اغلب

علاوه بر این next-css هنگام وارد کردن CSS چندین محدودیت از دست رفته وجود داشت. به عنوان مثال، می توانید یک فایل CSS را در هر فایل پروژه ای وارد کنید، اما آن فایل CSS وارد شده برای کل برنامه جهانی خواهد بود.

برای بهبود تجربه توسعه‌دهنده و رفع این ناسازگاری‌ها، کار را روی ارائه پشتیبانی از واردات CSS در Next.js به‌طور پیش‌فرض آغاز کرده‌ایم.

ما خوشحالیم که اعلام کنیم Next.js اکنون پشتیبانی داخلی برای وارد کردن شیوه نامه ها به برنامه شما دارد.

برای شروع استفاده از CSS import در برنامه خود، فایل CSS را در آن وارد کنید pages/_app.js.

برای مثال، شیوه نامه زیر را با نام در نظر بگیرید styles.css در ریشه پروژه شما:

body {
  padding: 20px 20px 60px;
  margin: 0;
}

ایجاد یک pages/_app.js فایل در صورتی که قبلا موجود نیست.

سپس وارد کنید styles.css فایل:

import '../styles.css';
 
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return Component {...pageProps} />;
}

از آنجایی که شیوه نامه ها ماهیت جهانی دارند، باید به Custom وارد شوند جزء این برای جلوگیری از تضاد نام کلاس و سفارش برای سبک های جهانی ضروری است.

در توسعه، بیان شیوه نامه‌ها به این امکان را می‌دهد که سبک‌های شما به‌طور خودکار در صفحه به‌روزرسانی شوند.

در تولید، تمام فایل‌های CSS به‌طور خودکار در یک فایل کوچک‌سازی شده به هم متصل می‌شوند .css فایل این فایل CSS از طریق a بارگذاری می شود و به طور خودکار به نشانه گذاری پیش فرض HTML تولید شده توسط Next.js تزریق می شود.

این ویژگی جدید کاملاً با عقب سازگار است. اگر استفاده می کنید @zeit/next-css یا سایر افزونه های مرتبط با CSS، این ویژگی برای جلوگیری از تداخل غیرفعال است.

اگر در حال حاضر استفاده می کنید @zeit/next-css توصیه می کنیم افزونه را از خود حذف کنید next.config.js و package.json، بنابراین در هنگام ارتقا به پشتیبانی داخلی CSS تغییر می کند.

لینک را به عنوان کپی کنیدپشتیبانی از ماژول CSS داخلی برای سبک های سطح مؤلفه

Next.js اکنون از ماژول های CSS با استفاده از [name].module.css قرارداد نامگذاری فایل

برخلاف پشتیبانی که قبلاً در Next.js 5 استفاده می‌شد next-css، ماژول های جهانی CSS و CSS اکنون می توانند همزیستی – next-css به همه نیاز دارد .css فایل های موجود در برنامه شما به عنوان جهانی یا محلی در نظر گرفته شوند، اما نه هر دو.

ماژول‌های CSS به صورت محلی CSS را با ایجاد نام‌های کلاس منحصربه‌فرد کپسوله می‌کنند. این به شما این امکان را می دهد که از نام کلاس CSS یکسان در فایل های مختلف بدون نگرانی در مورد برخورد استفاده کنید.

این رفتار ماژول‌های CSS را راهی عالی برای گنجاندن CSS در سطح مؤلفه می‌کند. فایل های ماژول CSS را می توان در هر نقطه از برنامه شما وارد کرد.

به عنوان مثال، موارد قابل استفاده مجدد را در نظر بگیرید Button جزء ج components/ پوشه:

ابتدا ایجاد کنید components/Button.module.css با محتوای زیر:

/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
  color: white;
  background-color: red;
}

سپس ایجاد کنید components/Button.js، وارد کردن و استفاده از فایل CSS بالا:

import styles from './Button.module.css';
 
export function Button() {
  return (
    button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    button>
  );
}

ماژول های CSS هستند به میل خود و فقط برای فایل هایی با .module.css پسوند. منظم شیوه نامه ها و فایل های جهانی CSS هنوز پشتیبانی می شوند.

در مرحله تولید، تمام فایل های ماژول CSS به طور خودکار در لینک قرار می گیرند بسیار کوچک و کد جدا شده است .css فایل ها. اینها .css فایل‌ها مسیرهای اجرای داغ را در برنامه شما نشان می‌دهند و اطمینان حاصل می‌کنند که حداقل مقدار CSS در هر صفحه برای ترسیم برنامه شما بارگذاری می‌شود.

همانطور که در بالا ذکر شد، این ویژگی جدید کاملاً با عقب سازگار است. اگر استفاده می کنید @zeit/next-css یا سایر افزونه های مرتبط با CSS، این ویژگی برای جلوگیری از تداخل غیرفعال است.

اگر در حال حاضر استفاده می کنید @zeit/next-css توصیه می کنیم افزونه را از خود حذف کنید next.config.js و package.json، بنابراین به پشتیبانی داخلی CSS تغییر می کند.

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

نسخه‌های Next.js قبل از 9.2 دارای مجموعه ثابتی از بسته‌های جاوا اسکریپت بودند که برای بارگیری و تعاملی کردن صفحه مورد نیاز بود:

فایل جاوا اسکریپت صفحه
فایل جاوا اسکریپت عمومی
بسته Next.js برای اجرای سمت کلاینت
بسته پیاده سازی سمت مشتری Webpack
واردات پویا (اضافه شده از طریق next/dynamic، هنگام استفاده)

برای تعاملی بودن صفحه، همه این بسته ها باید بارگذاری شوند، زیرا برای اجرای React در مرورگر به یکدیگر وابسته هستند.

از آنجایی که همه این بسته ها برای تعاملی کردن برنامه مورد نیاز هستند، مهم است که تا حد امکان بهینه شوند. در عمل، این بدان معنی است که کد را از قسمت های دیگر برنامه بیش از حد نکشید.

به همین دلیل Next.js از a استفاده می کند commons بسته ای که از جاوا اسکریپت رایج بین صفحات پشتیبانی می کند. محاسبه استراتژی تقسیم بسته نسل قدیم commons یک نسبت بهره برداری اکتشافی بود. اگر یک ماژول در بیش از 50٪ از همه صفحات استفاده شده باشد، به عنوان یک ماژول مشترک علامت گذاری می شود. در غیر این صورت، در فایل جاوا اسکریپت صفحه بسته بندی شده بود.

با این حال، برنامه ها می توانند از انواع مختلفی از صفحات تشکیل شده باشند. به عنوان مثال صفحات بازاریابی، وبلاگ و داشبورد. اگر تعداد صفحات بازاریابی در مقایسه با انواع دیگر صفحات زیاد باشد، محاسبه کل منجر به بهینه سازی هایی می شود که به شدت بر صفحات بازاریابی متمرکز شده اند.

هدف ما بهینه سازی برای همه انواع صفحه در یک برنامه است.

قلعه الکس یک روش گروه‌بندی جدید (ایجاد فایل‌های جاوا اسکریپت مجزا) پیشنهاد کرد که امکان گروه‌بندی بهینه بخش‌های مشترک با چندین فایل را فراهم می‌کند، از جمله زمانی که انواع صفحه درگیر هستند.

امروز ما خوشحالیم که اعلام کنیم این رفتار پاره شدن جدید به طور پیش فرض در Next.js 9.2 فعال است. مایلیم تشکر عمیق خود را از تیم Google Chrome و قلعه الکس برای سهم این تغییر. این تغییر منعکس کننده اوج هفته ها تحقیق، آزمایش آزمایشگاهی، آزمایش در دنیای واقعی و استقرار است.

پیاده سازی chunk جدید از HTTP/2 برای ارائه تعداد بیشتری از تکه های کوچکتر استفاده می کند.

با توجه به اکتشافی جدید، تکه ها برای موارد زیر ایجاد می شوند:

حداقل قطعه در هر صفحه
بخشی از یک چارچوب حاوی React، ReactDOM، React’s Scheduler و موارد دیگر.
قطعات کتابخانه برای انواع node_module وابستگی بیش از 160 کیلوبایت (pre-minify/gzip)
بخشی از Commons برای کد مورد استفاده در همه صفحات.
تا جایی که ممکن است تکه های مشترک (که توسط 2 صفحه یا بیشتر استفاده می شود)، بهینه سازی برای اندازه کلی برنامه و سرعت بارگذاری اولیه.
زمان اجرا مشتری Next.js.
زمان اجرای وب پک

بیایید نگاهی بیندازیم به معنای این در یک برنامه دنیای واقعی:

شریک صنعتی Barnebys® که در مراحل اولیه تصویب شد، شاهد کاهش 23 درصدی در اندازه کل برنامه بود.

علاوه بر این، بزرگترین بسته JS آنها 30٪ کاهش یافت – 605 کیلوبایت به 425 کیلوبایت – بدون نیاز به تغییر کد.

شریک صنعتی دیگر، SumUp®، شاهد کاهش 70 درصدی در بزرگترین بسته JS خود – 395 کیلوبایت کاهش به 122 کیلوبایت – بدون نیاز به تغییر کد بود.

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

	قبل از	بعد از	دلتا
بارنبیس	605 کیلوبایت	425 کیلوبایت	30% کوچکتر
SumUp	395 کیلوبایت	122 کیلوبایت	70% کوچکتر

رفتار گروه‌بندی جدید نه تنها اندازه کلی و اندازه بار اولیه شما را کاهش می‌دهد، بلکه پیمایش‌های متوالی سمت مشتری را نیز کاهش می‌دهد. Barnebys® شاهد کاهش 87 درصدی مقدار جاوا اسکریپت بارگیری شده پس از پیمایش شش (6) صفحه بود:

لینک را به عنوان کپی کنیدجاوا اسکریپت بارگیری شده توسط چندین انتقال سمت مشتری

	قبل از	بعد از	دلتا
بارنبیس	136 کیلوبایت	18 کیلوبایت	87% کوچکتر

این رفتار جدید کاملاً با عقب سازگار است. ارتقاء به آخرین نسخه Next.js تنها کاری است که باید انجام دهید تا از این بهبود عملکرد استفاده کنید.

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

با انتشار Next.js 9، بخش‌های مسیر پویا را برای ساده‌سازی بخش‌های پویا در Next.js بدون نیاز به سرور سفارشی معرفی کردیم. این ویژگی به طور گسترده توسط کاربران Next.js مورد استفاده قرار گرفته است.

هنوز مواردی وجود داشت که ویژگی بخش‌های مسیر پویا پوشش داده نمی‌شد.

یکی از آن موارد تمام مسیرها بود. به عنوان مثال مسیریابی یک علامت عام /post/** به عنوان یک صفحه این به ویژه زمانی مفید است که یک ساختار تودرتو دارید که توسط یک منبع محتوا مانند یک CMS تعریف شده است.

اکنون می توانید با استفاده از مسیرهای پویا جامع ایجاد کنید [...name] نحو

برای مثال، pages/post/[...slug].js مطابقت خواهد داشت /post/a، /post/a/b، /post/a/b/cو غیره

slug در شی درخواست روتر به عنوان آرایه ای از قطعات مسیر جداگانه ارائه می شود. بنابراین، در مورد جاده /post/foo/bar، شی درخواست خواهد بود { slug: ['foo', 'bar'] }.

ما بسیار هیجان زده هستیم که شاهد رشد مداوم پذیرش Next.js باشیم: