نسخه Next.js 14.2 شامل بهبودهای development، production و caching می‌باشد. در این مقاله قصد داریم تا بهبودهایی که در این نسخه صورت گرفته است را با هم بررسی کنیم.
خلاصه این تغییرات عبارت است از:
next dev --turbo.staleTimes.تیم Next.js در چند ماه گذشته،بر روی بهبود عملکرد ب کمک Turbopack کار کرده است. اکنون Turbopack در نسخه ۱۴٫۲ Next.js برای استفاده در دسترس قرار گرفته است:
npm که توسط کاربران در برنامه‌های Next.js مورد استفاده قرار می‌گیرد، اکنون می‌توانند با Turbopack کامپایل شوند.همچنین تیم توسعه Turbopack را به طور گسترده با برنامه‌های Vercel، مثلا vercel.com که یک برنامه بزرگ Next.js تست کرده است. نتایجی که بدست آمد به شرح زیر می‌باشد:
next dev --turbo
تیم توسعه اکنون بر روی بهبود استفاده از memory، پیاده‌سازی caching دائمی و next build --turbo تمرکز خواهد کرد.
next build: هدف تیم توسعه Next.js این است که build را به حالت Turbopack هم اضافه نمایند. در حال حاضر ۷۴٫۷ درصد از تست‌ها انجام شده است. می‌توانیم برای مشاهده مسیر پیشرفت لینک areweturboyet.com/build را دنبال کنیم.همینطور برای مشاهده لیستی از ویژگی‌های پشتیبانی شده و پشتیبانی نشده در Turbopack، مطالعه مستندات می‌تواند مفید باشد.
تیم توسعه Next.js علاوه بر بهبودهای مربوط با Turbopack، بر روی بهبود عملکرد کلی build و production برای همه برنامه‌های Next.js (هم Pages Router و هم App Router) کار کرده است.
یکی دیگر از بهبودهایی که تیم Next.js معرفی کرده است این است که دیگر exportها بلا استفاده در bundle قرار نخاوهند گرفت. به عنوان مثال، اگر ما یک کامپوننت Icon را از فایلی که دارای use Client است import کنیم، فقط شامل آیکنی می‌شود که مدنظر ما می‌باشد و سایرآیکون‌های پکیج دیگر در bundle قرار نمی‌گیرد. این کار می‌تواند تا حد زیادی اندازه bundle را کاهش دهد.
با تست این بهینه‌سازی بر روی یک کتابخانه محبوب مانند react-aria-components، اندازه bundle نهایی تا ۵۱٫۳ درصد کاهش پیدا کرد.
توجه به این نکته لازم است، این بهینه‌سازی در حال حاضر با فایل‌های barrel کار نمی‌کند. برای این کار می‌توانیم در فایل next.config.ts، از گزینه optimizePackageImports استفاده نماییم:
module.exports = {
experimental: {
optimizePackageImports: ['package-name'],
},
};
تیم توسعه، در طول build برنامه‌های Next.js در مقیاس بسیار بزرگ، متوجه خرابی‌های OOMs شد. پس از تحقیقات فراوان و بررسی گزارش‌های کاربران، متوجه شدند که مشکل مصرف زیاد memory به دلیل over-bundling و minification است. یعنی Next.js حین build برنامه، فایل‌های جاوااسکریپت را به شکل تکرار ایجاد می‌کند. به این ترتیب، تیم Next.js منطق bundling را refactor کرده و کامپایلر را برای این موارد بهینه کردند.
تست‌های اولیه نشان می‌دهد که در یک برنامه کوچک Next.js، میزان استفاده از memory و اندازه فایل کش از ۲٫۲ گیگابایت به کم‌تر از ۱۹۰ مگابایت کاهش یافته است.
همینطور برای آسان‌تر شدن دیباگ کردن عملکرد حافظه، یک flag به نام --experimental-debug-memory-usage در next build معرفی شده است که با مطالعه مستندات می‌توانیم اطلاعات بیشتری در این زمینه بدست بیاوریم.
تیم توسعه در نسخه ۱۴٫۲ Next.js، نحوه بهینه‌سازی CSS را در حین build با تقسیم کردن CSS به فایل‌های کوچک به نام CSS chunks به‌روزرسانی کرده است تا هنگام پیمایش بین صفحات از ایجاد تناقض بین استایل‌ها جلوگیری کند.
ترتیب و ادغام CSS chunkها اکنون با ترتیب importها تعریف می‌شود. به عنوان مثال در کد زیر، base-button.module.css قبل از page.module.css می‌باشد.
فایلbase-button.tsx:
import styles from './base-button.module.css';
export function BaseButton() {
return <button className={styles.primary} />;
}
فایل page.tsx:
import { BaseButton } from './base-button';
import styles from './page.module.css';
export function Page() {
return <BaseButton className={styles.primary} />;
}
برای حفظ ترتیب درست CSS، توصیه می‌شود تا:
انتظار ممی‌رود که این تغییرات بر روی برنامه‌ها تأثیر منفی نگذارد. با این حال، اگر در هنگام ارتقا، درمورد استایل‌ها دچار مشکل شدیم مطالعه مستندات مربوط به ترتیب اصولی پیاده‌سازی css می‌تواند بسیار مفید باشد.
مفهوم Caching بخش مهمی از ساخت اپلیکیشن‌های وب سریع و قابل اعتماد است. هنگام انجام mutationها، هم کاربران و هم توسعه‌دهندگان انتظار دارند که حافظه cache به‌روزرسانی شود تا آخرین تغییرات را منعکس کند.
Router Cache سمت کلاینت یک لایه ذخیره‌سازی است که برای ارائه یک تجربه navigation سریع، از طریق کش کردن مسیرهای بازدید شده و از پیش fetch شده روی کلاینت طراحی شده است.
تیم توسعه بر اساس بازخوردها، یک گزینه آزمایشی به نام staleTimes اضافه کرده است تا توسعه‌دهندگان بتوانند برای ابطال اعتبار داده‌ها، یک دوره زمانی را در client-side router cache پیکربندی کنند.
به‌طور پیش‌فرض، مسیرهای از پیش fetch شده، با استفاده از کامپوننت <Link>بدون prop prefetch به مدت ۳۰ ثانیه و اگر prop prefetch روی true تنظیم شود، به مدت ۵ دقیقه در حافظه cache ذخیره می‌شوند. می‌توانیم این مقادیر پیش‌فرض را با استفاده از تنظیمات زیر درفایل next.config.js بازنویسی کنیم:
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 30,
static: 180,
},
},
};
module.exports = nextConfig;
هدف staleTimes بهبود تجربه فعلی کاربرانی است که خواهان کنترل بیشتر بر روی مباحث caching هستند، اما این راه حل کامل نیست. تیم Next.js در نسخه‌های آینده، راه‌حل‌های انعطاف‌پذیرتری را ارائه خواهد کرد. مطالعه مستندات درمورد staleTimes می‌تواند مفید باشد.
تیم توسعه به کار بر روی مسیرهای Parallel و Intercept ادامه می‌دهد و اکنون در نسخه ۱۴٫۲ Next.js این دو مورد با Client-side Router Cache سازگار می‌باشند.
تیم توسعه از نسخه ۱۴٫۱، کار خود را در رابطه با بهبود پیام‌های خطا هنگام اجرای next dev شروع کرده است. این کار تا نسخه ۱۴٫۲ Next.js ادامه یافته و اکنون شامل پیام‌های خطای واضح‌تر، بهبود طراحی برای App Router و Pages Router، پشتیبانی از دارک مود و لایت مود و گزارش‌های dev و build واضح‌تر می‌باشد.
تیم React در ماه فوریه، نسخه React 19 را منتشر می‌کند. بنابراین، تیم Next.js برای این که آماده React 19 باشد، در حال کار بر روی آخرین ویژگی‌ها و بهبودها در Next.js است و قصد دارد تا یک نسخه اصلی و هماهنگ با آخریت تغییرات React منتشر کند.
دیدگاه‌ها: