نسخه جدید بتا Next.js 16

نکست جی‌اس ۱۶ (بتا) اکنون در دسترس است. این نسخه اولیه دسترسی به آخرین بهبودها در توربوپک، کشینگ و معماری نکست جی‌اس را قبل از انتشار نسخه پایدار فراهم می‌کند. برجسته‌ترین ویژگی‌های این نسخه عبارتند از:

terminal

# Use the automated upgrade CLI
npx @next/codemod@canary upgrade beta

# ...or upgrade manually
npm install next@beta react@latest react-dom@latest

# ...or start a new project
npx create-next-app@beta

توربوپک (پایدار)

توربوپک به پایداری برای هر دو ساخت توسعه و تولید رسیده است و اکنون bundler پیش‌فرض برای تمام پروژه‌های جدید نکست جی‌اس است. از زمان انتشار بتای آن در اوایل تابستان، پذیرش آن به سرعت افزایش یافته است: بیش از ۵۰٪ جلسات توسعه و ۲۰٪ ساخت‌های تولید در نکست جی‌اس ۱۵.۳+ قبلاً روی توربوپک اجرا می‌شوند.

با توربوپک، می‌توانید انتظار داشته باشید:

• ۲–۵ برابر ساخت‌های تولید سریع‌تر
• تا ۱۰ برابر Fast Refresh سریع‌تر

ما توربوپک را پیش‌فرض می‌کنیم تا این بهبودهای عملکرد را به هر توسعه‌دهنده نکست جی‌اس برسانیم، بدون نیاز به پیکربندی. برای اپ‌هایی با تنظیمات سفارشی webpack، می‌توانید همچنان از webpack استفاده کنید با اجرای:

terminal

next dev --webpack
next build --webpack

کشینگ فایل‌سیستم توربوپک (بتا)

توربوپک اکنون از کشینگ فایل‌سیستم در توسعه پشتیبانی می‌کند، که artifacts کامپایلر را روی دیسک بین اجرا ذخیره می‌کند تا زمان‌های کامپایل به طور قابل توجهی در restarts سریع‌تر شود، به ویژه در پروژه‌های بزرگ.

کشینگ فایل‌سیستم را در پیکربندی خود فعال کنید:

next.config.ts

const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};

export default nextConfig;

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

ما دوست داریم بازخورد شما را در مورد کشینگ فایل‌سیستم بشنویم. لطفاً آن را امتحان کنید و تجربیات خود را به اشتراک بگذارید.

create-next-app ساده‌شده

create-next-app با جریان راه‌اندازی ساده‌شده، ساختار پروژه به‌روز شده و پیش‌فرض‌های بهبودیافته بازطراحی شده است. الگوی جدید به طور پیش‌فرض شامل App Router، پیکربندی TypeScript-first، Tailwind CSS و ESLint است.

API آداپترهای ساخت (آلفا)

پس از RFC آداپترهای ساخت، ما با جامعه و پلتفرم‌های استقرار همکاری کردیم تا اولین نسخه آلفای API آداپترهای ساخت را ارائه دهیم.

آداپترهای ساخت به شما اجازه می‌دهند آداپترهای سفارشی ایجاد کنید که به فرآیند ساخت متصل شوند و به پلتفرم‌های استقرار و ادغام‌های ساخت سفارشی اجازه دهند پیکربندی نکست جی‌اس را تغییر دهند یا خروجی ساخت را پردازش کنند.

next.config.js

const nextConfig = {
  experimental: {
    adapterPath: require.resolve('./my-adapter.js'),
  },
};

module.exports = nextConfig;

بازخورد خود را در بحث RFC به اشتراک بگذارید.

پشتیبانی کامپایلر React (پایدار)

پشتیبانی داخلی از کامپایلر React اکنون در نکست جی‌اس ۱۶ پایدار است، پس از انتشار ۱.۰ کامپایلر React. کامپایلر React به طور خودکار کامپوننت‌ها را memoize می‌کند و re-renderهای غیرضروری را بدون هیچ تغییر دستی در کد کاهش می‌دهد.

گزینه پیکربندی reactCompiler از experimental به پایدار ارتقا یافته است. آن به طور پیش‌فرض فعال نیست زیرا ما همچنان داده‌های عملکرد ساخت را در انواع مختلف اپلیکیشن‌ها جمع‌آوری می‌کنیم. انتظار داشته باشید زمان‌های کامپایل در توسعه و ساخت بالاتر باشد وقتی این گزینه را فعال می‌کنید، زیرا کامپایلر React به Babel وابسته است.

next.config.ts

const nextConfig = {
  reactCompiler: true,
};

export default nextConfig;

آخرین نسخه پلاگین کامپایلر React را نصب کنید:

terminal

npm install babel-plugin-react-compiler@latest

ویژگی‌های اصلی و معماری

مسیریابی و ناوبری بهبودیافته

نکست جی‌اس ۱۶ شامل بازنگری کامل سیستم مسیریابی و ناوبری است که انتقال صفحات را سبک‌تر و سریع‌تر می‌کند.

تکرارزدایی Layout: وقتی چندین URL با یک layout مشترک prefetch می‌شود، layout یک بار دانلود می‌شود به جای جداگانه برای هر Link. برای مثال، یک صفحه با ۵۰ لینک محصول اکنون layout مشترک را یک بار دانلود می‌کند به جای ۵۰ بار، که اندازه انتقال شبکه را به طور چشمگیری کاهش می‌دهد.

Prefetching افزایشی: نکست جی‌اس فقط بخش‌هایی را که قبلاً در کش نیستند prefetch می‌کند، به جای صفحات کامل. کش prefetch اکنون:

• درخواست‌ها را وقتی لینک از viewport خارج می‌شود لغو می‌کند
• prefetch لینک‌ها را در hover یا وقتی دوباره وارد viewport می‌شود اولویت‌بندی می‌کند
• لینک‌ها را وقتی داده‌هایشان نامعتبر می‌شود دوباره prefetch می‌کند
• به طور seamless با ویژگی‌های آینده مانند Cache Components کار می‌کند

تجارت: ممکن است درخواست‌های prefetch فردی بیشتری ببینید، اما با اندازه‌های انتقال کل بسیار کمتر. ما باور داریم این تجارت مناسب برای تقریباً تمام اپلیکیشن‌هاست. اگر تعداد درخواست‌های افزایش‌یافته مشکلی ایجاد کند، لطفاً به ما اطلاع دهید. ما در حال کار روی بهینه‌سازی‌های اضافی برای inline کردن chunkهای داده به طور کارآمدتر هستیم.

این تغییرات هیچ تغییری در کد نیاز ندارند و برای بهبود عملکرد در تمام اپ‌ها طراحی شده‌اند.

PPR و Cache Components

نکست جی‌اس ۱۶ پرچم experimental Partial Pre-Rendering (PPR) و گزینه‌های پیکربندی را حذف می‌کند. PPR در حال ادغام در Cache Components است.

از نکست جی‌اس ۱۶، می‌توانید با استفاده از پیکربندی experimental.cacheComponents به PPR opt-in کنید. تفاوت‌هایی در پیاده‌سازی وجود دارد و Cache Components ویژگی‌ها و رفتارهای اضافی می‌آورد که قبل از Next.js Conf و انتشار پایدار نکست جی‌اس ۱۶ مستند و اعلام خواهد شد.

اگر اپلیکیشن شما به PPR (experimental.ppr = true) وابسته است: روی نسخه pinned نکست جی‌اس canary که اکنون استفاده می‌کنید بمانید. اگر در مهاجرت مشکل دارید، فعلاً روی نسخه فعلی بمانید و ما راهنمای مهاجرت را قبل از انتشار پایدار ارائه خواهیم داد.

APIهای کشینگ بهبودیافته

نکست جی‌اس ۱۶ APIهای کشینگ تصفیه‌شده‌ای را معرفی می‌کند برای کنترل صریح‌تر بر رفتار کش.

revalidateTag() (به‌روز شده)

revalidateTag() اکنون پروفایل cacheLife را به عنوان آرگومان دوم نیاز دارد تا رفتار stale-while-revalidate (SWR) را فعال کند:

import { revalidateTag } from 'next/cache';

//  Use built-in cacheLife profile (we recommend 'max' for most cases)
revalidateTag('blog-posts', 'max');

// Or use other built-in profiles
revalidateTag('news-feed', 'hours');
revalidateTag('analytics', 'days');

// Or use an inline object with a custom revalidation time
revalidateTag('products', { revalidate: 3600 });

//  Deprecated - single argument form
revalidateTag('blog-posts');

آرگومان پروفایل نام‌های پروفایل cacheLife داخلی (مانند 'max', 'hours', 'days') یا پروفایل‌های سفارشی تعریف‌شده در next.config را می‌پذیرد. همچنین می‌توانید یک شیء inline { revalidate: number } پاس کنید. ما 'max' را برای اکثر موارد توصیه می‌کنیم، زیرا revalidation پس‌زمینه را برای محتوای بلندمدت فعال می‌کند. وقتی کاربران محتوای تگ‌شده را درخواست می‌کنند، داده‌های کش‌شده را بلافاصله دریافت می‌کنند در حالی که نکست جی‌اس در پس‌زمینه revalidate می‌کند.

از revalidateTag() استفاده کنید وقتی می‌خواهید فقط ورودی‌های کش تگ‌شده مناسب را با رفتار stale-while-revalidate نامعتبر کنید. این برای محتوای استاتیک ایده‌آل است که می‌تواند eventual consistency را تحمل کند.

راهنمایی مهاجرت: آرگومان دوم را با یک پروفایل cacheLife (ما 'max' را توصیه می‌کنیم) برای رفتار SWR اضافه کنید، یا از updateTag() در Server Actions اگر به semantics read-your-writes نیاز دارید استفاده کنید.

updateTag() (جدید)

updateTag() یک API جدید فقط برای Server Actions است که semantics read-your-writes را فراهم می‌کند، کش را expire و بلافاصله در همان درخواست تازه می‌کند:

'use server';

import { updateTag } from 'next/cache';

export async function updateUserProfile(userId: string, profile: Profile) {
  await db.users.update(userId, profile);

  // Expire cache and refresh immediately - user sees their changes right away
  updateTag(`user-${userId}`);
}

این تضمین می‌کند که ویژگی‌های تعاملی تغییرات را بلافاصله منعکس کنند. عالی برای فرم‌ها، تنظیمات کاربر و هر workflowی که کاربران انتظار می‌برند تغییرات خود را فوراً ببینند.

refresh() (جدید)

refresh() یک API جدید فقط برای Server Actions است برای تازه کردن داده‌های uncached فقط. اصلاً به کش دست نمی‌زند:

'use server';

import { refresh } from 'next/cache';

export async function markNotificationAsRead(notificationId: string) {
  // Update the notification in the database
  await db.notifications.markAsRead(notificationId);

  // Refresh the notification count displayed in the header
  // (which is fetched separately and not cached)
  refresh();
}

این API مکمل router.refresh() سمت کلاینت است. از آن استفاده کنید وقتی نیاز به تازه کردن داده‌های uncached نمایش‌داده‌شده در جای دیگری از صفحه پس از انجام یک action دارید. shellهای صفحه کش‌شده و محتوای استاتیک شما سریع باقی می‌مانند در حالی که داده‌های دینامیک مانند شمارش اعلان‌ها، معیارهای زنده یا نشانگرهای وضعیت تازه می‌شوند.

React 19.2 و ویژگی‌های Canary

App Router در نکست جی‌اس ۱۶ از آخرین انتشار Canary React استفاده می‌کند، که شامل ویژگی‌های تازه منتشرشده React 19.2 و ویژگی‌های دیگر در حال پایدارسازی تدریجی است. برجسته‌ترین‌ها عبارتند از:

• View Transitions: انیمیشن عناصری که داخل یک Transition یا ناوبری به‌روز می‌شوند
• useEffectEvent: استخراج منطق non-reactive از Effects به توابع Effect Event قابل استفاده مجدد
• Activity: رندر “فعالیت پس‌زمینه” با پنهان کردن UI با display: none در حالی که state را حفظ و Effects را تمیز می‌کند

بیشتر در اعلام React 19.2 بیاموزید.

تغییرات شکستنده و به‌روزرسانی‌های دیگر

الزامات نسخه

حذف‌ها

این ویژگی‌ها قبلاً deprecated بودند و اکنون حذف شده‌اند:

تغییرات رفتاری

این ویژگی‌ها رفتارهای پیش‌فرض جدیدی در نکست جی‌اس ۱۶ دارند: