نسخه Next.js 14.2 شامل بهبودهای development، production و caching می‌باشد. در این مقاله قصد داریم تا بهبودهایی که در این نسخه صورت گرفته است را با هم بررسی کنیم.

خلاصه این تغییرات عبارت است از:

بررسی Turbopack برای development

تیم Next.js در چند ماه گذشته،بر روی بهبود عملکرد ب کمک Turbopack کار کرده‌ است. اکنون Turbopack در نسخه ۱۴٫۲ Next.js برای استفاده در دسترس قرار گرفته است:

همچنین تیم توسعه Turbopack را به طور گسترده با برنامه‌های Vercel، مثلا

vercel.com
vercel.com که یک برنامه بزرگ Next.js تست کرده است. نتایجی که بدست آمد به شرح زیر می‌باشد:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
next dev --turbo
next dev --turbo
next dev --turbo

تیم توسعه اکنون بر روی بهبود استفاده از memory، پیاده‌سازی caching دائمی و

next build --turbo
next build --turbo تمرکز خواهد کرد.

همینطور برای مشاهده لیستی از ویژگی‌های پشتیبانی شده و پشتیبانی نشده در Turbopack، مطالعه مستندات می‌تواند مفید باشد.

بررسی بهبودهای مربوط به Build و Production

تیم توسعه Next.js علاوه بر بهبودهای مربوط با Turbopack، بر روی بهبود عملکرد کلی build و production برای همه برنامه‌های Next.js (هم Pages Router و هم App Router) کار کرده است.

Tree-shaking

یکی دیگر از بهبودهایی که تیم Next.js معرفی کرده است این است که دیگر exportها بلا استفاده در bundle قرار نخاوهند گرفت. به عنوان مثال، اگر ما یک کامپوننت

Icon
Icon را از فایلی که دارای
use Client
use Client است import کنیم، فقط شامل آیکنی می‌شود که مدنظر ما می‌باشد و سایرآیکون‌های پکیج دیگر در bundle قرار نمی‌گیرد. این کار می‌تواند تا حد زیادی اندازه bundle را کاهش دهد.

با تست این بهینه‌سازی بر روی یک کتابخانه محبوب مانند

react-aria-components
react-aria-components، اندازه bundle نهایی تا ۵۱٫۳ درصد کاهش پیدا کرد.

توجه به این نکته لازم است، این بهینه‌سازی در حال حاضر با فایل‌های barrel کار نمی‌کند. برای این کار می‌توانیم در فایل

next.config.ts
next.config.ts، از گزینه optimizePackageImports استفاده نماییم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
module.exports = {
experimental: {
optimizePackageImports: ['package-name'],
},
};
module.exports = { experimental: { optimizePackageImports: ['package-name'], }, };
module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
};

استفاده از Memory در زمان Build

تیم توسعه، در طول build برنامه‌های Next.js در مقیاس بسیار بزرگ، متوجه خرابی‌های OOMs شد. پس از تحقیقات فراوان و بررسی گزارش‌های کاربران، متوجه شدند که مشکل مصرف زیاد memory به دلیل over-bundling و minification است. یعنی Next.js حین build برنامه، فایل‌های جاوااسکریپت را به شکل تکرار ایجاد می‌کند. به این ترتیب، تیم Next.js منطق bundling را refactor کرده و کامپایلر را برای این موارد بهینه کردند.

تست‌های اولیه نشان می‌دهد که در یک برنامه کوچک Next.js، میزان استفاده از memory و اندازه فایل کش از ۲٫۲ گیگابایت به کم‌تر از ۱۹۰ مگابایت کاهش یافته است.

همینطور برای آسان‌تر شدن دیباگ کردن عملکرد حافظه، یک flag به نام

--experimental-debug-memory-usage
--experimental-debug-memory-usage در
next build
next build معرفی شده است که با مطالعه مستندات می‌توانیم اطلاعات بیشتری در این زمینه بدست بیاوریم.

CSS

تیم توسعه در نسخه ۱۴٫۲ Next.js، نحوه بهینه‌سازی CSS را در حین build با تقسیم کردن CSS به فایل‌های کوچک به نام CSS chunks به‌روزرسانی کرده است تا هنگام پیمایش بین صفحات از ایجاد تناقض بین استایل‌ها جلوگیری کند.

ترتیب و ادغام CSS chunkها اکنون با ترتیب importها تعریف می‌شود. به عنوان مثال در کد زیر،

base-button.module.css
base-button.module.css قبل از
page.module.css
page.module.css می‌باشد.

فایل

base-button.tsx
base-button.tsx:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import styles from './base-button.module.css';
export function BaseButton() {
return <button className={styles.primary} />;
}
import styles from './base-button.module.css'; export function BaseButton() { return <button className={styles.primary} />; }
import styles from './base-button.module.css';
 
export function BaseButton() {
  return <button className={styles.primary} />;
}

فایل

page.tsx
page.tsx:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { BaseButton } from './base-button';
import styles from './page.module.css';
export function Page() {
return <BaseButton className={styles.primary} />;
}
import { BaseButton } from './base-button'; import styles from './page.module.css'; export function Page() { return <BaseButton className={styles.primary} />; }
import { BaseButton } from './base-button';
import styles from './page.module.css';
 
export function Page() {
  return <BaseButton className={styles.primary} />;
}

برای حفظ ترتیب درست CSS، توصیه می‌شود تا:

انتظار ممی‌رود که این تغییرات بر روی برنامه‌ها تأثیر منفی نگذارد. با این حال، اگر در هنگام ارتقا، درمورد استایل‌ها دچار مشکل شدیم مطالعه مستندات مربوط به ترتیب اصولی پیاده‌سازی css می‌تواند بسیار مفید باشد.

بررسی بهبودهای مربوط به Caching

مفهوم Caching بخش مهمی از ساخت اپلیکیشن‌های وب سریع و قابل اعتماد است. هنگام انجام mutationها، هم کاربران و هم توسعه‌دهندگان انتظار دارند که حافظه cache به‌روزرسانی شود تا آخرین تغییرات را منعکس کند.

staleTimes

Router Cache سمت کلاینت یک لایه ذخیره‌سازی است که برای ارائه یک تجربه navigation سریع، از طریق کش کردن مسیرهای بازدید شده و از پیش fetch شده روی کلاینت طراحی شده است.

تیم توسعه بر اساس بازخوردها، یک گزینه آزمایشی به نام

staleTimes
staleTimes اضافه کرده است تا توسعه‌دهندگان بتوانند برای ابطال اعتبار داده‌ها، یک دوره زمانی را در client-side router cache پیکربندی کنند.

به‌طور پیش‌فرض، مسیرهای از پیش fetch شده، با استفاده از کامپوننت

<Link>
<Link>بدون prop
prefetch
prefetch به مدت ۳۰ ثانیه و اگر prop
prefetch
prefetch روی
true
true تنظیم شود، به مدت ۵ دقیقه در حافظه cache ذخیره می‌شوند. می‌توانیم این مقادیر پیش‌فرض را با استفاده از تنظیمات زیر درفایل
next.config.js
next.config.js بازنویسی کنیم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 30,
static: 180,
},
},
};
module.exports = nextConfig;
const nextConfig = { experimental: { staleTimes: { dynamic: 30, static: 180, }, }, }; module.exports = nextConfig;
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
};
 
module.exports = nextConfig;

هدف

staleTimes
staleTimes بهبود تجربه فعلی کاربرانی است که خواهان کنترل بیشتر بر روی مباحث caching هستند، اما این راه حل کامل نیست. تیم Next.js در نسخه‌های آینده، راه‌حل‌های انعطاف‌پذیرتری را ارائه خواهد کرد. مطالعه مستندات درمورد
staleTimes
staleTimes می‌تواند مفید باشد.

مسیرهای Parallel و intercept

تیم توسعه به کار بر روی مسیرهای Parallel و Intercept ادامه می‌دهد و اکنون در نسخه ۱۴٫۲ Next.js این دو مورد با Client-side Router Cache سازگار می‌باشند.

بررسی بهبودهای مربوط به Errorsها

تیم توسعه از نسخه ۱۴٫۱، کار خود را در رابطه با بهبود پیام‌های خطا هنگام اجرای

next dev
next dev شروع کرده است. این کار تا نسخه ۱۴٫۲ Next.js ادامه یافته و اکنون شامل پیام‌های خطای واضح‌تر، بهبود طراحی برای App Router و Pages Router، پشتیبانی از دارک مود و لایت مود و گزارش‌های
dev
dev و
build
build واضح‌تر می‌باشد.

React 19

تیم React در ماه فوریه، نسخه React 19 را منتشر می‌کند. بنابراین، تیم Next.js برای این که آماده React 19 باشد، در حال کار بر روی آخرین ویژگی‌ها و بهبودها در Next.js است و قصد دارد تا یک نسخه اصلی و هماهنگ با آخریت تغییرات React منتشر کند.