قابلیت‌های جدید در NextJS 16

مقدمه

تیمی از طراحان و مهندسان Next.js (Jimmy Lai، Josh Story، Sebastian Markbåge و Tim Neutkens) توضیحات و ویژگی‌های نسخهٔ 16 را پیش از Next.js Conf 2025 منتشر کردند. مقاله پیش رو ترجمه‌ای است از مقاله مذکور:

هدف اصلی این نسخه، تثبیت و تسهیل تجربهٔ توسعه برای برنامه‌های بزرگ و هم‌زمان بهبود عملکرد و کنترل کش است. در ادامه مهم‌ترین تغییرات را به‌صورت خلاصه و سپس با جزییات فنی شرح می‌دهیم.

نکات برجسته و توضیح فنی

1. Cache Components — کش صریح و Partial Pre-Rendering (PPR)

Next.js 16 قابلیت جدیدی به نام Cache Components معرفی می‌کند که با دستورالعمل جدید "use cache" کار می‌کند. این الگو باعث می‌شود کش‌گذاری در برنامه‌ها صریح‌تر، قابل کنترل‌تر و انعطاف‌پذیرتر شود؛ به‌طوری‌که کامپایلر در محل استفاده کلیدهای کش را تولید می‌کند. مدل PPR که از چند سال قبل معرفی شده بود تکمیل می‌شود و توسعه‌دهنده می‌تواند بخش‌هایی از یک صفحه را به‌صورت ایستا یا داینامیک انتخاب کند بدون اینکه از سرعت بارگذاری اولیه کاسته شود.

نمونه پیکربندی ساده در next.config.ts:

const nextConfig = {
  cacheComponents: true,
};

export default nextConfig;

2. Next.js DevTools MCP — ادغام Model Context Protocol

یکپارچه‌سازی MCP (Model Context Protocol) در DevTools این امکان را فراهم می‌کند که عامل‌های مبتنی بر هوش مصنوعی با دانش‌پایهٔ Next.js کار کنند: اطلاعات مسیرها، رفتار رندر و کش، لاگ‌های یکپارچه، دسترسی خودکار به خطای استک‌تریس‌ها و آگاهی از صفحهٔ فعال. هدف: تشخیص خودکار مشکلات و پیشنهاد راه‌حل‌ها در جریان توسعه.

3. proxy.ts جایگزین middleware.ts

فایل middleware.ts در مسیر اپ‌ها با proxy.ts جایگزین شده تا «مرز شبکه» (network boundary) صریح شود. proxy.ts روی runtime نود اجرا می‌شود؛ نام‌گذاری واضح‌تر و پیش‌بینی‌پذیرتر بودن runtime هدف این تغییر است. (توجه: middleware.ts برای موارد Edge هنوز قابل استفاده است اما منسوخ است و در آینده حذف خواهد شد).

نمونهٔ ساده:

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

4. بهبودهای لاگینگ (Development & Build)

نسخهٔ 16 لاگ‌های درخواست توسعه و مراحل بیلد را تفکیک و زمان‌گذاری می‌کند تا بفهمید هر مرحله چقدر طول کشیده — مثلاً زمان کامپایل، اجرای رندر، جمع‌آوری داده‌ها و تولید صفحات استاتیک. این شفافیت باعث می‌شود شناسایی گلوگاه‌ها سریع‌تر شود.

5. Turbopack — به‌صورت پیش‌فرض و پایدار

Turbopack اکنون پایدار شده و به‌عنوان bundler پیش‌فرض برای پروژه‌های جدید انتخاب می‌شود؛ به‌طور کلی وعدهٔ 2 تا 5 برابر سریع‌تر شدن بیلدها و تا 10 برابر سریع‌تر شدن Fast Refresh داده شده است. همچنین امکان فعال‌سازی مجدد webpack برای پروژه‌هایی که به آن نیاز دارند حفظ شده است (next dev --webpack). برای پروژه‌های خیلی بزرگ، قابلیت «فایل‌سیستم کش» در حالت توسعه (beta) نیز معرفی شده که بین اجرای مجددها اشیاء کامپایل را روی دیسک نگه می‌دارد تا زمان راه‌اندازی و کامپایل به‌طور محسوسی کاهش یابد.

6. APIهای کش جدید و اصلاح‌شده

چند API مهم معرفی یا اصلاح شده‌اند:

• revalidateTag(name, cacheLifeProfile) — اکنون نیاز به پروفایل cacheLife دارد تا رفتار stale-while-revalidate کنترل شود. (مثلاً 'max'، 'hours'، 'days' یا پروفایل سفارشی).

• updateTag() — API جدید مخصوص Server Actions برای گرفتن رفتار read-your-writes؛ یعنی بلافاصله پس از نوشتن، کش منقضی و تازه‌سازی می‌شود، مناسب فرم‌ها یا تنظیمات کاربر.

• refresh() — API جدید Server Actions برای تازه‌سازی داده‌های بدون کش؛ کش را دست نمی‌زند و برای مواردی مثل شمارندهٔ اعلان‌ها کاربرد دارد.

نمونه‌های کدِ کوتاه در مستندات نشان می‌دهد که این APIها برای بهبود تجربهٔ interactive و consistency طراحی شده‌اند.

7. React 19.2 و امکانات Canary

App Router در Next.js 16 با نسخهٔ Canary از React هماهنگ شده که شامل ویژگی‌هایی مثل View Transitions و useEffectEvent() است. برخی از این امکانات در حال تثبیت تدریجی هستند و Next.js از آن‌ها پشتیبانی به‌عمل می‌آورد.

تجربهٔ توسعه و ابزارها

• create-next-app ساده‌تر و با پیش‌فرض‌هایی مانند App Router، TypeScript-first، Tailwind و ESLint به‌روز شده است.

• Build Adapters API (alpha) برای ایجاد آداپترهای سفارشی که می‌توانند جریان بیلد را تغییر دهند معرفی شده است (مناسب پلتفرم‌های استقرار یا نیازهای deployment خاص).

• React Compiler که خودکار memoization را برای جلوگیری از رندرهای غیرضروری فراهم می‌کند، به وضعیت stable نزدیک‌تر شده (اما به‌صورت پیش‌فرض خاموش است؛ ممکن است زمان کامپایل را افزایش دهد چون مبتنی بر Babel است).

چگونه به Next.js 16 ارتقا دهیم

تیم Next.js ابزار codemod خودکار را پیشنهاد کرده است؛ دستورالعمل‌ها به‌صورت زیر هستند:

# با codemod خودکار
npx @next/codemod@canary upgrade latest

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

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

اگر codemod نتواند تمام تغییرات را اعمال کند، راهنمای مهاجرت در مستندات رسمی ارائه شده است.

نکات مهاجرت و هشدارها

• برخی تغییرات «breaking» در نسخه‌های بتا قبلی اعلام شده‌اند (مثل async params و تغییر رفتارهای پیش‌فرض next/image) — قبل از ارتقا تستِ کامل انجام دهید.

• اگر از middleware.ts استفاده می‌کنید و runtime Edge مدنظر است، فعلاً کار شما ادامه دارد اما برای runtime Node باید به proxy.ts مهاجرت کنید.

• فعال‌سازی React Compiler ممکن است باعث افزایش زمان کامپایل شود؛ بنابراین برای هر اپلیکیشن تست کنید که سودِ runtime بر هزینهٔ build می‌چربد یا خیر.

جمع‌بندی و نگاه به آینده

Next.js 16 حرکت بزرگی به‌سمت کنترل صریح‌تر کش و عملکرد بهتر در اپلیکیشن‌های پیچیده است. Turbopack به عنوان bundler پیش‌فرض و Cache Components با مدل PPR، ترکیبی ارائه می‌دهند که هم توسعهٔ سریع و هم سرعت بارگذاری عالی را هدف قرار می‌دهد. افزوده شدن MCP به DevTools نشان می‌دهد تیم Next.js به سمت ادغام ابزارهای هوش‌مصنوعی برای تسهیل اشکال‌زدایی و بهبود DX حرکت می‌کند. برای تیم‌هایی که پروژه‌های بزرگ یا realtime دارند، قابلیت‌هایی مثل updateTag() و refresh() می‌تواند بسیار کارگشا باشد.

منابع

• خبر رسمی انتشار و مستندات تغییرات — Next.js Blog