آپدیت جدید NextJs(نکست جی اس) این غول دوست داشتنی

بروز رسانی جدید نکست جی اس ، که حدودا کمتر از یک هفته است اعمال شده تغییرات جالبی رو برای این غول دوست داشتنی رقم زده !

نکست در نسخه 10.02 که به تازگی ریلیز شده ، خیال توسعه دهنده هاشو از کانفیگ وب پک 5 راحت کرده و بالاخره بعد از حدود 6 ماه از ریلیز شدن وب پک 5 ، رضایت داد که این مایگریشن رو انجام بده و از نسخه 10.01 به سمت وب پک 5 حرکت کرد و در آخرین تغییرات خودش اعلام کرده که اگر تنظیمات خیلی خاصی روی next.config.js خودتون انجام نداده باشید خیلی راحت از قابلیتای جدید و جذاب وب پک 5 که بیشترش تو بحث پرفورمنس و حذف و جایگزینی چندین پلاگین built-In خود وب پک بوده رو شامل میشه !

این غول دوست داشتنی تغییرات عمده ای رو از نسخه 10 به بعد به خودش دید که خیلیاتون ازش خبر دارید شاید یکی از جذابتریناش اضافه شدن کامپوننت Image و مبحث بسیار جذاب و شیرین Lazy Loading در بحث تصاویر که خیلی از توسعه دهنده های فرانت به چالش میکشه و خیلی براشون جذابه که این مدل رو روی سایتشون اعمال کنند ، پیش تر مجبور بودند به شکل دستی با کد نویسی و شاید حساب کردن OffsetTop و یه سری از Event های تصاویر یا به قول بعضی از دوستان اضافه کردن اتریبیوت Lazy به تگ htmlاین قابلیت به هر نحوی که شده داخل سایتشون اعمال کنند ولی خب نکست در آپدیت نسخه 10 اش این قابلیت اضافه کرد و کار با تصاویر خیلی خیلی راحت کرد ، تصاویر در مرورگر هایی که WEBP ساپورت میکنند به شکل webp در میان و با پراپ quality به شکل درصد میتونین اعلام کنین که چقدر براتون کیفیتشو بیاره پایین که این واقعا تو بحث پرفورمنس فوق العادست ! من خودم عکس هایی که حجم 2 مگ داشتند رو تست کردم و کیفیتش تا 100 کیلوبایت کاهش میداد و با این تکنیک پرفورمنس خیلی خوبی ازش میشد گرفت !

جدا از نسخه 10 ، نسخه جدید نکست جی اس قابلیت های زیر رو به نکست اضافه کرده که میتونه تغییرات مثبتی در جهت بهبود پرفورمنس نکست جی اس تلقی بشه !

1. اضافه شدن یک کش سیستم که باعث میشه فقط فایل هایی که تغییر کردن مجدد بیلد بشن و دیگه نیازی نیست همه فایلا یه باره از اول بیلد بشن ( که واقعا میتونم بگم از بحث زمانی یکم شاید اذیت میکرد و وقت گیر بود) ، طبق ادعا نکست تا 63 درصد بهبود داخل بیلد هاش انجام شده که خب رقم قابل توجهیه !
2. ارتقا فست رفرش دوست داشتنی! :طبق ادعا نکست ، فست رفرش اولویت بندی میشه و در هر بار رفرش شده چیزی نزدیک به 100 تا 200 میلی ثانیه سرعتش بیشتره ( البته که خیلی به چشم نمیاد و بیزنسی به قضیه نگاه کنین)
3. کش سیستم سمت مرورگر هم بهتر انجام میشه به این شکل که با توجه به این که خود بیلد هم تشخیص میده کدوم فایلا تغییر کردن ( سیستم مشابه ویچرال دام رو اینجا برای فایلا پیاده سازی کردن و با یه diff میتونن تفاوتارو متوجه بشن درست چیزی شبیه به گیت ! ) این عمل باعث میشه مرورگر ها هم بهتر جاوااسکریپت و کانتنت های شما رو کش کنند !
4. ارتقا چیزی که نکست بهش میگه tree shaken : در واقع اینطوری ازش برداشت میشه که ایمپورت هایی که استفاده نشدن تو کد میاد براتون توی بیلد پاک میکنه تا پرفورمنس بهتری بگیرید و خب این تو اپدیت جدید عملکردش بهتر شده و سرعت بهتری بهتون میده

یه چیز خیلی جالبی که اعلام کردند این بوده که خیلی وقت زیادی توی مایگریشن کردن به سمت وب پک 5 شدن نکست جی اس انجام شده و چیزی بالغ بر 340 هزار تست (integration tests) براش در نظر گرفتن !

5. بهبود پرفورمنس خود نکست Cli و کامند هایی که برای ران کردن اپ انجام میشده ، سریعتر عمل میکنند مثل next dev که 33 درصد بهتر عمل میکنه و خب نشون میده که زوم این نسخه بیشتر رو مباحث cli و بیلد و ... بوده !

6. یه اتفاق جالب تو این نسخه اینه که موقع نویگیشن روت ها اول فوکس نکست روی المنت هایی هست که یوزر میبینه یعنی خود کانتنت و بادی و بعد میاد بقیه جاها رو اپدیت میکنه و این خیلی نکته جالبیه تو گیفی که داخل سایت گذاشته نشون میده که وقتی نویگیت میکنه اول متن ها نمایان میشن و بعد تگ title آپدیت میشه این شکلی کانتنت زودتر برای یوزر نشون داده میشه و به قول خودشون دسترسی و تجربه کاربری بهتری داره .

7.ویژگی جالب بعدی نکست جی اس قابلیتی هست که باعث میشه شما داخل ری دایرکت های سمت سرور و ری رایت های سمت سرور یک پراپرتی داشته باشید به اسم "has"! حالا این به چه کار میاد ؟ تصور کنین یوزری با مرورگر خیلی قدیمی وارد سایتتون شده که مثلا شما تو استایلا از flex استفاده کردین و ساپورت نمیکنه اون صفحه رو یا از یه قابلیتی که رو مرورگر قدیمی قابل اجرا نیست شما میتونین یه سری شرطاتون داخل has تعریف کنین ( اینجوری بخونین آیا این شرط را دارد (has)) و بعد از اینکه true برگردونه ریدایرکت یا ری رایت سمت سرورتون اجرا میشه ! حتی میتونین با این روش کوکی های سمت سرورتون رو هم بخونین و بعد اجازه دسترسی به یوزر بدین و اگر کوکی اش validate نبود ریدایرکتش کنین ! نمونه کد پایین تو تفهیم صحبتام کمکتون میکنه !

module.exports = {
async redirects() {
return [
{
source: '/:path*',
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
}
]
}
}

این کد با چک کردن UserAgant و مرورگر کاربر در صورت نداشتن نسخه مناسب او را به صفحه مخصوص خود ریدایرکت میکند

البته قابلیت فیلتر کردن آیپی رو هم میشه باهاش انجام داد ! جدای از کلود فلر یا ابر اروان یا dns ها

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

در نهایت با کوکی های سمت سرور هم این شکلی میشه مبحث شیرین احراز هویت رو پیاده سازی کرد

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

8.بهبود فونت ها : نکست میگه 83 درصد وب داره از فونت استفاده میکنه ولی خب درصد اپتیمایزی خیلی خیلی کمتر از این حرفاست و صرفا داره ایمپورت میشه و ازش استفاده میشه ، کار خفنی که نکست انجام میده اینه که برای اون دسته از دوستان که خیلی First Contentful Paint (FCP) ، Largest Contentful Paint (LCP) علاقه دارند و عمدتا سئو کار هستند یه قابلیت جدیدی معرفی کرده که باعث میشه فونت ها به شکل این لاین به تگ استایلی که درون اون صفحه ای که برای شما در حال نمایش هست اضافه بشه این شکلی نکست جی اس معتقده پرفورمنس خیلی خوبی تو سئو گرفته !

// 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>

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

@font-face { font-family: 'MyWebFont';

src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');

font-display: swap;

با این کار شما به وب میفهمونید که تا زمانی که فونتم لود نشده فونت عادی خودتو بزار هر وقت لود شد جایگزین کن font-display: swap;

و در آخر یه خبر خیلی خفن میده و میگه توبیاس کوپرز افسانه ای ( فوندر وب پک ) به تیم Vercel اضافه شده و مشخصه که چقد داره Vercel بریز بپاش میکنه ، البته اینو هم مشخص میکنه که چقد وب پک از این به بعد فوکس میکنه رو بحث پرفورمنس و آماده تغییرات خیلی خفن تو بحث کانفیگ وب پک روی نکست باید باشیم !

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

فقط انجامش بده ! همین !

کامنت و لایکاتون باعث دلگرمی عه !

مخلصیم

پوریا باباعلی !

لینکدین من : https://ir.linkedin.com/in/pouriya-babaali

منبع: https://nextjs.org/blog/next-10-2