در آستانه کنفرانس Next.js Conf 2025، نسخه Next.js 16 اکنون در دسترس است.

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

• Cache Components: مدل جدید با استفاده از Partial Pre-Rendering (PPR) و “use cache” برای ناوبری فوری.
• Next.js Devtools MCP: ادغام Model Context Protocol برای دیباگینگ و workflow بهبودیافته.
• Proxy: جایگزینی middleware با proxy.ts برای شفاف‌سازی مرز شبکه.
• DX: لاگ‌گیری بهبودیافته برای بیلد و درخواست‌های توسعه.

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

• Turbopack (پایدار): باندلر پیش‌فرض برای همه اپ‌ها با Fast Refresh تا ۵-۱۰ برابر سریع‌تر و بیلدهای ۲-۵ برابر سریع‌تر.
• Turbopack File System Caching (بتا): زمان استارت و کامپایل سریع‌تر برای اپ‌های بزرگ.
• پشتیبانی از React Compiler (پایدار): ادغام داخلی برای memoization خودکار.
• Build Adapters API (آلفا): ایجاد آداپتورهای سفارشی برای تغییر فرآیند بیلد.
• Routing بهبودیافته: ناوبری و prefetching بهینه‌شده با deduplication layout و prefetching افزایشی.
• Caching APIs بهبودیافته: updateTag() جدید و revalidateTag() بهبودیافته.
• React 19.2: View Transitions، useEffectEvent()، <Activity/>.
• تغییرات Breaking: Async params، defaults next/image و بیشتر.

ارتقا به Next.js 16

# استفاده از CLI ارتقای خودکار
npx @next/codemod@canary upgrade latest

# ...یا ارتقای دستی
npm install next@latest react@latest react-dom@latest

# ...یا شروع پروژه جدید
npx create-next-app@latest

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

ویژگی‌های جدید و بهبودها

Cache Components

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

برخلاف کشینگ implicit در نسخه‌های قبلی App Router، کشینگ با Cache Components کاملاً opt-in است. همه کدهای dynamic در هر صفحه، layout یا API route به طور پیش‌فرض در زمان درخواست اجرا می‌شوند و تجربه out-of-the-box Next.js را با انتظارات توسعه‌دهندگان از یک فریم‌ورک full-stack همخوان می‌سازد.

Cache Components همچنین داستان Partial Prerendering (PPR) را کامل می‌کنند که در سال ۲۰۲۳ معرفی شد. قبل از PPR، Next.js باید برای هر URL بین رندر استاتیک یا dynamic انتخاب می‌کرد؛ میانه‌ای وجود نداشت. PPR این دوگانگی را حذف کرد و به توسعه‌دهندگان اجازه داد بخش‌هایی از صفحات استاتیک را به رندر dynamic (از طریق Suspense) opt-in کنند بدون از دست دادن بارگذاری اولیه سریع صفحات کاملاً استاتیک.

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

// next.config.ts
const nextConfig = {
  cacheComponents: true,
};

export default nextConfig;

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

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

اطلاعات بیشتر در مستندات.

Next.js Devtools MCP

Next.js 16، Next.js DevTools MCP را معرفی می‌کند، یک ادغام Model Context Protocol برای دیباگینگ AI-assisted با insight contextual به اپلیکیشن شما.

Next.js DevTools MCP به agentهای AI ارائه می‌دهد:

• دانش Next.js: Routing، caching و رفتار رندرینگ.
• لاگ‌های یکپارچه: لاگ‌های مرورگر و سرور بدون تغییر context.
• دسترسی خودکار به خطاها: stack traceهای دقیق بدون کپی دستی.
• آگاهی از صفحه: درک contextual از route فعال.

این امکان را به agentهای AI می‌دهد تا مسائل را تشخیص دهند، رفتار را توضیح دهند و fixes را مستقیماً در workflow توسعه پیشنهاد کنند.

اطلاعات بیشتر در مستندات.

proxy.ts (قبلاً middleware.ts)

proxy.ts جایگزین middleware.ts می‌شود و مرز شبکه اپ را explicit می‌سازد. proxy.ts روی runtime Node.js اجرا می‌شود.

• چه باید کرد: middleware.ts را به proxy.ts تغییر نام دهید و تابع صادرشده را به proxy تغییر نام دهید. منطق همان می‌ماند.
• چرا: نام‌گذاری واضح‌تر و runtime واحد و predictable برای interception درخواست.

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

نکته: فایل middleware.ts هنوز برای use caseهای Edge runtime در دسترس است، اما deprecated شده و در نسخه آینده حذف خواهد شد.

اطلاعات بیشتر در مستندات.

Logging Improvements

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

• Compile: Routing و compilation.
• 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

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

Developer Experience

Turbopack (پایدار)

Turbopack به پایداری برای بیلدهای توسعه و تولید رسیده و اکنون باندلر پیش‌فرض برای همه پروژه‌های جدید Next.js است. از زمان انتشار بتای تابستان، adoption به سرعت افزایش یافته: بیش از ۵۰٪ sessionهای توسعه و ۲۰٪ بیلدهای تولید در Next.js 15.3+ از Turbopack استفاده می‌کنند.

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

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

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

next dev --webpack
next build --webpack

Turbopack File System Caching (بتا)

Turbopack اکنون از filesystem caching در توسعه پشتیبانی می‌کند و artifacts کامپایلر را روی دیسک ذخیره می‌کند برای زمان‌های کامپایل سریع‌تر در restartها، به ویژه در پروژه‌های بزرگ.

filesystem caching را در پیکربندی فعال کنید:

// next.config.ts
const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};

export default nextConfig;

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

ما مشتاق feedback شما در حالی که روی filesystem caching iterate می‌کنیم. لطفاً آن را امتحان کنید و تجربه‌تان را به اشتراک بگذارید.

Simplified create-next-app

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

Build Adapters API (آلفا)

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

Build Adapters به شما اجازه می‌دهد آداپتورهای سفارشی ایجاد کنید که به فرآیند بیلد hook می‌شوند و به پلتفرم‌های deployment و integrations بیلد سفارشی اجازه می‌دهد پیکربندی Next.js را تغییر دهند یا output بیلد را process کنند.

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

module.exports = nextConfig;

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

React Compiler Support (پایدار)

پشتیبانی داخلی از React Compiler اکنون در Next.js 16 پایدار است پس از انتشار ۱.۰ React Compiler. React Compiler به طور خودکار کامپوننت‌ها را memoize می‌کند و re-renderهای غیرضروری را بدون تغییر دستی کد کاهش می‌دهد.

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

// next.config.ts
const nextConfig = {
  reactCompiler: true,
};

export default nextConfig;

نسخه جدیدترین plugin React Compiler را نصب کنید:

npm install babel-plugin-react-compiler@latest

Core Features & Architecture

Enhanced Routing and Navigation

Next.js 16 شامل overhaul کامل سیستم routing و navigation است که transitions صفحه را leanتر و سریع‌تر می‌سازد.

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

Incremental prefetching: Next.js فقط بخش‌هایی که قبلاً در cache نیستند را prefetch می‌کند نه صفحات کامل. prefetch cache اکنون:

• درخواست‌ها را وقتی لینک viewport را ترک می‌کند cancel می‌کند.
• prefetching لینک را روی hover یا re-entering viewport prioritize می‌کند.
• لینک‌ها را وقتی داده‌شان invalid می‌شود re-prefetch می‌کند.
• با ویژگی‌های آینده مثل Cache Components seamlessly کار می‌کند.

Trade-off: ممکن است درخواست‌های prefetch فردی بیشتری ببینید، اما با اندازه انتقال کل بسیار کمتر. ما باور داریم این trade-off مناسب برای تقریباً همه اپ‌ها است. اگر تعداد درخواست‌های افزایش‌یافته مسئله‌ای ایجاد کند، لطفاً به ما بگویید. ما روی optimizations اضافی برای inline کردن data chunks کار می‌کنیم.

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

Improved Caching APIs

Next.js 16 APIهای caching refined را معرفی می‌کند برای کنترل explicit بیشتر روی رفتار cache.

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

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

import { revalidateTag } from 'next/cache';

// استفاده از cacheLife profile داخلی (توصیه 'max' برای بیشتر موارد)
revalidateTag('blog-posts', 'max');

// یا استفاده از پروفایل‌های داخلی دیگر
revalidateTag('news-feed', 'hours');
revalidateTag('analytics', 'days');

// یا استفاده از شیء inline با زمان revalidation سفارشی
revalidateTag('products', { revalidate: 3600 });

// Deprecated - فرم تک آرگومان
revalidateTag('blog-posts');

آرگومان profile نام‌های پروفایل cacheLife داخلی (مثل 'max'، 'hours'، 'days') یا پروفایل‌های سفارشی تعریف‌شده در next.config را قبول می‌کند. همچنین می‌توانید شیء inline { expire: number } پاس دهید. ما 'max' را برای بیشتر موارد توصیه می‌کنیم زیرا background revalidation را برای محتوای long-lived فعال می‌کند. وقتی کاربران محتوای tagged را درخواست می‌کنند، داده cached را فوراً دریافت می‌کنند در حالی که Next.js در background revalidate می‌کند.

از revalidateTag() وقتی می‌خواهید فقط entries cached tagged مناسب را با stale-while-revalidate invalidate کنید استفاده کنید. این برای محتوای static که eventual consistency را تحمل می‌کند ایده‌آل است.

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

updateTag() (جدید)

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

'use server';

import { updateTag } from 'next/cache';

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

  // Expire cache و refresh فوری - کاربر تغییراتش را فوراً می‌بیند
  updateTag(`user-${userId}`);
}

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

refresh() (جدید)

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

'use server';

import { refresh } from 'next/cache';

export async function markNotificationAsRead(notificationId: string) {
  // به‌روزرسانی notification در دیتابیس
  await db.notifications.markAsRead(notificationId);

  // Refresh کردن شمارش notification نمایش‌داده‌شده در header
  // (که جداگانه fetch شده و cached نیست)
  refresh();
}

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

React 19.2 and Canary Features

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

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

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

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

Version Requirements

Removals

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

Behavior Changes

این ویژگی‌ها رفتار پیش‌فرض جدیدی در Next.js 16 دارند:

Deprecations

این ویژگی‌ها در Next.js 16 deprecated هستند و در نسخه آینده حذف خواهند شد:

Additional Improvements

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