Next.js 16 | Next.js

پیش از برگزاری Next.js Conf 2025، Next.js 16 اکنون در دسترس است.

این نسخه جدیدترین پیشرفت‌ها را در Turbopack، حافظه پنهان و معماری Next.js ارائه می‌کند. از زمان نسخه بتای قبلی، چندین ویژگی و پیشرفت جدید اضافه کرده‌ایم:

• اجزای کش: یک مدل جدید با استفاده از پیش اجرا جزئی (PPR) و استفاده از حافظه پنهان برای پیمایش فوری.
• Next.js Devtools MCP: مدل ادغام پروتکل زمینه برای بهبود اشکال زدایی و گردش کار.
• پروکسی: میان افزار جایگزین شده است proxy.ts برای روشن کردن مرز شبکه
• DX: ثبت بهبود یافته برای ساخت‌ها و درخواست‌های توسعه.

به عنوان یادآوری، این ویژگی ها از نسخه بتای قبلی در دسترس بودند:

به Next.js 16 ارتقا دهید:

# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest
 
# ...or upgrade manually
npm install next@latest react@latest react-dom@latest
 
# ...or start a new project
npx create-next-app@latest

برای مواردی که کد مد نمی تواند به طور کامل کد شما را انتقال دهد، لطفا راهنمای ارتقا را بخوانید.

لینک را به عنوان کپی کنیداجزای کش

مؤلفه‌های کش مجموعه جدیدی از ویژگی‌ها هستند که برای شفاف‌تر و انعطاف‌پذیرتر کردن کش در Next.js طراحی شده‌اند. آنها حول محور جدید متمرکز می شوند "use cache" دستورالعملی که می تواند برای کش کردن صفحات، مؤلفه ها و توابع استفاده شود و از کامپایلر برای تولید خودکار کلیدهای کش در هر کجا که استفاده می شود استفاده می کند.

برخلاف کش ضمنی موجود در نسخه‌های قبلی App Router، کش کردن با Cache Components کاملاً فعال است. همه کدهای پویا در هر صفحه، طرح‌بندی یا مسیر API به‌طور پیش‌فرض در زمان درخواست اجرا می‌شوند، و به Next.js تجربه‌ای خارج از جعبه می‌دهد که بهتر با آنچه توسعه‌دهندگان از یک چارچوب برنامه فول پشته انتظار دارند، هماهنگ می‌شود.

مؤلفه‌های کش همچنین تاریخچه پیش‌اجرای جزئی (PPR) را تکمیل می‌کنند که اولین بار در سال 2023 معرفی شد. حد وسطی وجود نداشت PPR این دوگانگی را از بین می برد و به توسعه دهندگان این امکان را می دهد تا بخش هایی از صفحات استاتیک خود را در رندر پویا (از طریق Suspense) بدون قربانی کردن بار اولیه سریع صفحات کاملاً ایستا انتخاب کنند.

می توانید Cache Components را در خود فعال کنید next.config.ts فایل:

const nextConfig = {
  cacheComponents: true,
};
 
export default nextConfig;

ما در 22 اکتبر در Next.js Conf 2025 اطلاعات بیشتری در مورد Cache Components و نحوه استفاده از آنها به اشتراک خواهیم گذاشت و در هفته های آینده محتوای بیشتری را در وبلاگ و اسناد خود به اشتراک خواهیم گذاشت.

توجه: همانطور که قبلا در بتا، آزمایش قبلی اعلام شده بود experimental.ppr گزینه های پرچم و پیکربندی به نفع پیکربندی Cache Components حذف شده اند.

در مستندات اینجا بیشتر بیاموزید.

لینک را به عنوان کپی کنیدNext.js Devtools MCP

Next.js 16 را معرفی می کند Next.js DevTools MCP، ادغام یک پروتکل بافت مدل برای اشکال زدایی به کمک هوش مصنوعی با بینش متنی در برنامه شما.

Next.js DevTools MCP به عوامل هوش مصنوعی موارد زیر را ارائه می دهد:

• دانش Next.js: رفتار مسیریابی، ذخیره سازی و رندرینگ
• گزارش های یکپارچه: گزارش‌های مرورگر و سرور بدون تغییر زمینه
• دسترسی به خطای خودکار: ردیابی پشته با جزئیات بدون کپی دستی
• دانش صفحه: درک متنی مسیر فعال

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

در مستندات اینجا بیشتر بیاموزید.

لینک را به عنوان کپی کنیدproxy.ts (سابق middleware.ts)

proxy.ts جایگزین می کند middleware.ts و مرز شبکه برنامه را مشخص می کند. proxy.ts در زمان اجرا Node.js اجرا می شود.

• چه کار کنم؟: تغییر نام middleware.ts → proxy.ts و نام تابع صادر شده را به proxy. منطق به همین شکل باقی می ماند.
• چرا: نام گذاری واضح تر و یکنواخت تر، زمان اجرا قابل پیش بینی برای رهگیری درخواست ها.

export default function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url));
}

توجه: این middleware.ts فایل هنوز برای موارد استفاده در زمان اجرا Edge در دسترس است، اما منسوخ شده است و در نسخه بعدی حذف خواهد شد.

در مستندات اینجا بیشتر بیاموزید.

لینک را به عنوان کپی کنیدبهبودهای گزارش

در Next.js 16، گزارش‌های درخواست توسعه گسترش یافته‌اند، که نشان می‌دهد زمان در کجا صرف شده است.

• کامپایل: مسیریابی و کامپایل
• Render: کد خود را اجرا کنید و React رندر کنید

ساخت همچنین برای نشان دادن زمان صرف شده گسترش یافته است. هر مرحله از فرآیند ساخت اکنون با زمان لازم برای تکمیل نمایش داده می شود.

   ▲ Next.js 16 (Turbopack)
 
 ✓ Compiled successfully in 615ms
 ✓ Finished TypeScript in 1114ms
 ✓ Collecting page data in 208ms
 ✓ Generating static pages in 239ms
 ✓ Finalizing page optimization in 5ms

ویژگی های زیر قبلاً در نسخه بتا اعلام شده بود:

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

لینک را به عنوان کپی کنیدپک توربو (پایدار)

Turbopack هم برای ساخت‌های توسعه و هم برای تولید به ثبات رسیده است و اکنون بسته پیش‌فرض برای همه پروژه‌های Next.js جدید است. از زمان انتشار بتا در اوایل تابستان امسال، پذیرش به سرعت رشد کرده است: بیش از 50 درصد از جلسات توسعه و 20 درصد از ساخت‌های تولیدی Next.js 15.3+ اکنون در Turbopack در حال اجرا هستند.

با Turbopack می توانید انتظار داشته باشید:

• تولید 2-5 برابر سریعتر
• تا 10 برابر سریعتر به روز رسانی سریع

ما در حال ایجاد استاندارد Turbopack هستیم تا این بهبودهای عملکرد را برای هر توسعه دهنده Next.js بیاوریم، بدون نیاز به پیکربندی. برای برنامه‌هایی با تنظیمات بسته وب سفارشی، می‌توانید با اجرای زیر به استفاده از بسته وب ادامه دهید:

next dev --webpack
next build --webpack

لینک را به عنوان کپی کنیدذخیره سازی سیستم فایل Turbopack (بتا)

Turbopack اکنون از کش سیستم فایل در توسعه پشتیبانی می کند، مصنوعات کامپایلر را روی دیسک بین اجراها ذخیره می کند تا زمان کامپایل بسیار سریعتر در راه اندازی مجدد، به ویژه در پروژه های بزرگ.

ذخیره فایل سیستم را در پیکربندی خود فعال کنید:

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

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

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

لینک را به عنوان کپی کنیدساده شده create-next-app

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

لینک را به عنوان کپی کنیدAPI برای ساخت آداپتورها (آلفا)

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

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

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

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

لینک را به عنوان کپی کنیدپشتیبانی React Compiler (پایدار)

پشتیبانی داخلی از React Compiler اکنون در Next.js 16 پس از انتشار نسخه 1.0 React Compiler پایدار است. کامپایلر React به طور خودکار کامپوننت‌ها را به خاطر می‌سپارد و با صفر کردن تغییرات دستی کد، رندر مجدد غیرضروری را کاهش می‌دهد.

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

const nextConfig = {
  reactCompiler: true,
};
 
export default nextConfig;

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

npm install babel-plugin-react-compiler@latest

لینک را به عنوان کپی کنیدویژگی های کلیدی و معماری

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

Next.js 16 شامل بازنگری کامل سیستم مسیریابی و ناوبری است،
انتقال بین صفحات را آسان تر و سریع تر می کند.

کپی برداری از طرح: هنگام واکشی از قبل چندین URL با یک طرح بندی مشترک، طرح بندی یک بار به جای جداگانه برای هر پیوند دانلود می شود. به عنوان مثال، صفحه ای با 50 پیوند محصول، اکنون به جای 50 بار، طرح اشتراک گذاری شده را یک بار دانلود می کند، که به طور چشمگیری اندازه انتقال شبکه را کاهش می دهد.

پیش واکشی افزایشی: Next.js فقط قسمت هایی را که هنوز در کش نیستند و نه کل صفحات را از پیش واکشی می کند. کش پیش واکشی اکنون:

• هنگامی که پیوند از viewport خارج می شود، درخواست ها را لغو می کند
• واکشی اولیه پیوند را در حالت انتظار یا در هنگام ورود مجدد به نمای درگاه اولویت بندی می کند
• وقتی پیوندها نامعتبر است، پیوندها را دوباره واکشی کنید
• با ویژگی‌های آینده مانند Cache Components یکپارچه کار می‌کند

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

این تغییرات نیازی به اصلاح کد ندارند و برای بهبود عملکرد در همه برنامه ها در نظر گرفته شده است.

لینک را به عنوان کپی کنیدAPIهای ذخیره سازی بهبود یافته

Next.js 16 API های کش پیشرفته را برای کنترل واضح تر بر رفتار حافظه پنهان معرفی می کند.

لینک را به عنوان کپی کنیدrevalidateTag() (به روز شده)

revalidateTag() اکنون نیاز به a cacheLife نمایه به عنوان آرگومان دوم برای فعال کردن رفتار اعتبارسنجی مجدد منسوخ شده (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', { expire: 3600 });
 
// ⚠️ Deprecated - single argument form
revalidateTag('blog-posts');

آرگومان نمایه یک داخلی می گیرد cacheLife نام پروفایل (مانند 'max'، 'hours'، 'days') یا پروفایل های کاربری تعریف شده در شما next.configهمچنین می توانید به صورت درون خطی ارسال کنید { expire: number } شی توصیه می کنیم استفاده کنید 'max' در بیشتر موارد، زیرا امکان تأیید مجدد پس‌زمینه برای محتوای طولانی مدت را فراهم می‌کند. وقتی کاربران محتوای برچسب‌گذاری شده را درخواست می‌کنند، بلافاصله داده‌های کش را دریافت می‌کنند در حالی که Next.js در پس‌زمینه دوباره بررسی می‌کند.

از آن استفاده کنید revalidateTag() زمانی که می‌خواهید فقط ورودی‌های ذخیره‌شده به‌خوبی علامت‌گذاری‌شده با رفتار اعتبارسنجی مجدد منسوخ را باطل کنید. این برای محتوای ثابتی که می‌تواند ثبات نهایی را تحمل کند، ایده‌آل است.

دستورالعمل های مهاجرت: آرگومان دوم را با a اضافه کنید cacheLife نمایه (توصیه می شود 'max') برای رفتار یا استفاده SWR updateTag() اگر به معناشناسی بخوانید و بنویسید در Server Actions نیاز دارید.

لینک را به عنوان کپی کنیدupdateTag() (جدید)

updateTag() یک API جدید فقط برای اقدامات سرور است که ارائه می دهد خواندن و نوشتن معناشناسی، نشت و خواندن فوری داده های تازه در همان پرس و جو:

'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}`);
}

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

لینک را به عنوان کپی کنیدrefresh() (جدید)

refresh() یک API جدید فقط برای اقدامات سرور به‌روزرسانی است فقط داده های ذخیره نشده. این به هیچ وجه روی حافظه پنهان تأثیر نمی گذارد:

'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(). زمانی که نیاز به بازخوانی داده‌های ذخیره نشده در جای دیگری از صفحه پس از انجام یک عمل دارید، از آن استفاده کنید. در حالی که داده‌های پویا مانند تعداد اعلان‌ها، معیارهای زنده یا شاخص‌های وضعیت به‌روزرسانی می‌شوند، بسته‌بندی‌های صفحه ذخیره‌شده و محتوای ثابت شما سریع می‌مانند.

لینک را به عنوان کپی کنیدویژگی های React 19.2 و Canary

App Router در Next.js 16 از آخرین نسخه React Canary استفاده می کند که شامل ویژگی های React 19.2 تازه منتشر شده و سایر ویژگی هایی است که به تدریج در حال تثبیت شدن هستند. نکات برجسته عبارتند از:

• مروری بر انتقال ها: عناصری را متحرک کنید که در داخل یک انتقال یا پیمایش به روز می شوند
• useEffectEvent: منطق غیر واکنشی را از اثرات در توابع رویداد اثر قابل استفاده مجدد استخراج کنید
• فعالیت: “فعالیت پس‌زمینه” را با پنهان کردن رابط کاربری با display: none ضمن حفظ وضعیت و پاکسازی اثرات

در اطلاعیه React 19.2 اطلاعات بیشتری کسب کنید.

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

لینک را به عنوان کپی کنیدنسخه مورد نیاز

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

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

لینک را به عنوان کپی کنیدتغییرات در رفتار

این توابع رفتار پیش‌فرض جدیدی در Next.js 16 دارند:

لینک را به عنوان کپی کنیدرد خارج شده ها

این ویژگی‌ها در Next.js 16 منسوخ شده‌اند و در نسخه بعدی حذف خواهند شد:

لینک را به عنوان کپی کنیدبهبودهای اضافی

• بهبود عملکرد: بهینه سازی عملکرد قابل توجه برای next dev و next start دستورات
• Node.js بومی TypeScript برای next.config.ts: دویدن next dev، next build، و next start دستورات با --experimental-next-config-strip-types برای فعال کردن TypeScript بومی برای next.config.ts.

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

بازخورد خود را به اشتراک بگذارید و به شکل گیری آینده Next.js کمک کنید:

Next.js نتیجه کار مشترک بیش از 3000 توسعه دهنده فردی است. این نسخه توسط:

• این Next.js تیم: اندرو، هندریک، یانکا، جیاچی، جیمی، جیوون، جی جی، جاش، جود، سم، سباستین، سبی، وایات و زک.
• این پکیج توربو تیم: بنجامین، جاش، لوک، نیکلاس، تیم، توبیاس و ویل.
• این Next.js Docs تیم: دلبا، ریچ، اسماعیل و یوسف.

با تشکر فراوان از @mischnic، @timneutkens، @unstubbable، @wyattjoh، @Cy-Tek، @lukesandberg، @OoMNoO، @ztanner، @icyJoseph، @huozhi، @gnoff، @ijjk، @povilasv، @dwrth، @obendyScho، @andyScho، @aymer @vercel-release-bot، @Shireee، @eps1lon، @dharun36، @kachkaev، @bgw، @yousefdawood7، @TheAlexLichter، @sokra، @ericx0099، @leerob، @Copilot، @fireairforce، @fufuShih، @3,M, @yenance @martinfrancois، @lubieowoce، @gaojude، @lachlanjc، @liketiger، @styfle، @aaronbrown-vercel، @Samii2383، @FelipeChicaiza، @kevva، @m1abdullahh، @F7b5، @AnshumanF, @Roshuman71، @Roebert @sireesha-siri، @brian-lou، @joao4xz، @stefanprobst، @samselikoff، @acdlite، @gwkline، @bgub، @brock-statsig و @karlhorky برای کمک!