Next.js ۱۶؛ Turbopack، Cache Components و نکات مهاجرت

Next.js 16 نسخه اصلی فریم‌ورک Next.js است که در ۲۱ اکتبر ۲۰۲۵ منتشر شد و سه تغییر بزرگ آورد: Turbopack باندلر پیش‌فرض همه پروژه‌ها شد، مدل کش جدید و کاملاً اختیاری Cache Components با دستور "use cache" معرفی شد، و فایل middleware.ts به proxy.ts تغییر نام داد. کنار این‌ها، چند تغییر ناسازگار مثل حذف دسترسی هم‌زمان به params و حداقل Node.js ۲۰.۹ هم وجود دارد که مهاجرت را نیازمند برنامه می‌کند.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

وضعیت تا آبان ۱۴۰۵: Next.js ۱۶ در ۲۱ اکتبر ۲۰۲۵ منتشر شد و پس از آن نسخه‌های ۱۶.۱ (دسامبر ۲۰۲۵)، ۱۶.۲ (مارس ۲۰۲۶)، ۱۶.۳ (اوت ۲۰۲۶) و ۱۶.۴ (۶ اکتبر ۲۰۲۶) آمدند. Next.js از ژوئیه ۲۰۲۶ برنامه انتشار امنیتی منظم دارد و انتشار امنیتی بعدی برای ۳ نوامبر ۲۰۲۶ اعلام شده است. همیشه آخرین نسخه وصله‌شده شاخه ۱۶ را نصب کنید.

این مقاله یک راهنمای ارتقای عملی است: ابتدا مهم‌ترین ویژگی‌ها را با مثال کد توضیح می‌دهیم، بعد تغییرات ناسازگار را در یک جدول مرور می‌کنیم و در پایان یک چک‌لیست گام‌به‌گام مهاجرت از Next.js ۱۵ به ۱۶ ارائه می‌دهیم.

Next.js ۱۶ چه تغییرات مهمی دارد؟

Next.js ۱۶ طبق اطلاعیه رسمی Next.js ۱۶ روی سه محور کار کرده است: سرعت ساخت با Turbopack، کنترل صریح کش با Cache Components، و ساده‌سازی معماری مسیریابی. فهرست اصلی تغییرات:

• Turbopack پایدار و پیش‌فرض: طبق اعلام رسمی، ساخت production دو تا پنج برابر و Fast Refresh تا ده برابر سریع‌تر.
• Cache Components: کش اختیاری با "use cache" که داستان Partial Prerendering (PPR) را کامل می‌کند.
• proxy.ts: جایگزین middleware.ts که روی runtime نود اجرا می‌شود.
• پشتیبانی پایدار از React Compiler: گزینه reactCompiler از حالت آزمایشی خارج شد، اما به‌طور پیش‌فرض خاموش است.
• مسیریابی بهتر: حذف دانلود تکراری layoutهای مشترک و prefetch تدریجی.
• APIهای کش جدید: updateTag() و refresh() و امضای جدید revalidateTag().
• Next.js DevTools MCP: اتصال ابزارهای هوش مصنوعی به اطلاعات مسیریابی، لاگ‌ها و خطاهای پروژه.

نسخه‌های Next.js ۱۶ تا امروز

از انتشار Next.js ۱۶ تاکنون چهار نسخه فرعی منتشر شده که هر کدام بخشی از قابلیت‌ها را کامل کرده‌اند. اگر امروز مهاجرت می‌کنید، مستقیماً آخرین نسخه وصله‌شده شاخه ۱۶ را هدف بگیرید:

نسخه	تاریخ انتشار	مهم‌ترین تغییرات طبق وبلاگ رسمی
16.0	۲۱ اکتبر ۲۰۲۵	Turbopack پیش‌فرض، Cache Components، proxy.ts، React Compiler پایدار
16.1	۱۸ دسامبر ۲۰۲۵	کش فایل‌سیستمی Turbopack در توسعه، Bundle Analyzer جدید
16.2	۱۸ مارس ۲۰۲۶	Adapter API پایدار، بهبود سرعت رندر و صفحات خطا
16.3	۳ اوت ۲۰۲۶	Instant Navigations، سرور توسعه و ساخت سریع‌تر
16.4	۶ اکتبر ۲۰۲۶	کامپایل تنبل، خروجی کوچک‌تر Turbopack، پشتیبانی از React ۱۹.۳

Turbopack در Next.js ۱۶ چه چیزی را تغییر می‌دهد؟

Turbopack باندلر نوشته‌شده با Rust است که در Next.js ۱۶ هم برای توسعه و هم برای ساخت production پایدار و پیش‌فرض شد. اطلاعیه رسمی می‌گوید پیش از این انتشار، بیش از ۵۰٪ جلسات توسعه و ۲۰٪ ساخت‌های production روی Next.js ۱۵.۳ به بعد از Turbopack استفاده می‌کردند.

اگر پروژه شما پیکربندی webpack سفارشی دارد (لودرها یا پلاگین‌های خاص)، می‌توانید موقتاً با فلگ --webpack به webpack برگردید و در این فاصله پیکربندی را منتقل کنید:

# ارتقای خودکار با codemod رسمی
npx @next/codemod@canary upgrade latest

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

# اگر پیکربندی webpack سفارشی دارید (موقت)
next dev --webpack
next build --webpack

نکته مهم دیگر: تنظیمات Turbopack از experimental.turbopack به کلید سطح بالای turbopack در next.config منتقل شده و اگر فایل پیکربندی Babel پیدا شود، Turbopack به‌طور خودکار Babel را فعال می‌کند. در نسخه‌های بعدی هم Turbopack بهبود یافت؛ مثلاً ۱۶.۱ کش فایل‌سیستمی برای توسعه و ۱۶.۴ کامپایل تنبل (lazy compilation) و خروجی کوچک‌تر آورد.

Cache Components در Next.js ۱۶ چیست؟

Cache Components مدل جدید کش در Next.js ۱۶ است که بر پایه دستور "use cache" کار می‌کند و کش را کاملاً اختیاری (opt-in) می‌کند. برخلاف کش ضمنی نسخه‌های قبلی App Router که بسیاری از توسعه‌دهنده‌ها را غافلگیر می‌کرد، در Cache Components همه کدهای پویا به‌طور پیش‌فرض در زمان درخواست اجرا می‌شوند و فقط چیزی کش می‌شود که شما صریحاً علامت بزنید. کامپایلر کلید کش را خودکار می‌سازد.

// next.config.ts
const nextConfig = {
  cacheComponents: true, // فعال‌سازی Cache Components
};

export default nextConfig;

// app/products/page.tsx
async function getProducts() {
  'use cache';
  const res = await fetch('https://api.example.com/products');
  return res.json();
}

با فعال کردن cacheComponents، فلگ‌های قدیمی experimental.ppr و experimental.dynamicIO حذف شده‌اند؛ اگر پروژه شما از آن‌ها استفاده می‌کرد، باید به این تنظیم جدید مهاجرت کنید.

APIهای جدید کش: revalidateTag، updateTag و refresh

در Next.js ۱۶ تابع revalidateTag() یک آرگومان دوم می‌خواهد: نام یک پروفایل cacheLife (مثل 'max'، 'hours' یا 'days') تا رفتار stale-while-revalidate داشته باشد؛ شکل تک‌آرگومانی منسوخ شده است. برای فرم‌ها و تنظیمات کاربر که باید تغییر فوراً دیده شود، API جدید updateTag() در Server Actions و برای تازه‌سازی داده‌های کش‌نشده، refresh() اضافه شده است.

import { revalidateTag, updateTag } from 'next/cache';

// Next.js 16: آرگومان دوم (پروفایل cacheLife) لازم است
revalidateTag('blog-posts', 'max');

// در Server Action برای دیدن فوری تغییر کاربر
'use server';
export async function saveProfile(userId, data) {
  await db.users.update(userId, data);
  updateTag('user-' + userId);
}

proxy.ts جایگزین middleware.ts؛ چه باید کرد؟

proxy.ts نام جدید middleware.ts در Next.js ۱۶ است که مرز شبکه‌ای برنامه را صریح‌تر می‌کند و روی runtime نود اجرا می‌شود. مهاجرت ساده است: فایل را تغییر نام دهید و تابع صادرشده را proxy بنامید؛ منطق تغییری نمی‌کند.

// قبل از Next.js 16 (middleware.ts)
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/fa', request.url));
}

// Next.js 16 (proxy.ts) — فقط نام فایل و تابع عوض می‌شود
export default function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/fa', request.url));
}

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

تغییرات ناسازگار Next.js ۱۶ کدام‌اند؟

تغییرات ناسازگار Next.js ۱۶ بیشتر حذف قابلیت‌هایی است که در نسخه‌های ۱۵.x منسوخ اعلام شده بودند. مهم‌ترین موارد که در مهاجرت باید بررسی کنید:

تغییر	جزئیات	اقدام لازم
حداقل Node.js	Node.js ۲۰.۹ به بعد؛ Node.js ۱۸ پشتیبانی نمی‌شود	ارتقای Node روی سرور و CI
حداقل TypeScript	نسخه ۵.۱	ارتقای TypeScript
مرورگرها	Chrome و Edge و Firefox از ۱۱۱، Safari از ۱۶.۴	بررسی مخاطبان با مرورگر قدیمی
params و searchParams	دسترسی هم‌زمان حذف شد	استفاده از await params
cookies، headers، draftMode	فقط ناهم‌زمان	استفاده از await cookies()
دستور next lint	حذف شد؛ build دیگر lint اجرا نمی‌کند	اجرای مستقیم ESLint یا Biome
AMP	همه APIهای AMP حذف شد	حذف صفحات AMP
serverRuntimeConfig و publicRuntimeConfig	حذف شد	استفاده از متغیرهای محیطی
مسیرهای موازی	همه slotها باید default.js داشته باشند	افزودن default.js با notFound() یا null
next/image	تغییر پیش‌فرض‌ها: کش ۴ ساعته، کیفیت ۷۵، حداکثر ۳ ریدایرکت	بازبینی تنظیمات images

نمونه مهم‌ترین تغییر کدی، یعنی ناهم‌زمان شدن params:

// قبل: دسترسی هم‌زمان (در Next.js 16 حذف شد)
export default function Page({ params }) {
  return <h1>محصول {params.slug}</h1>;
}

// Next.js 16: params یک Promise است
export default async function Page({ params }) {
  const { slug } = await params;
  return <h1>محصول {slug}</h1>;
}

نکته: در سایت‌های فارسی که اسلاگ‌ها فارسی است، بعد از مهاجرت حتماً صفحات با آدرس فارسی را تست کنید؛ کد await params مقدار رمزگشایی‌شده را برمی‌گرداند، اما منطق‌های قدیمی که خودشان decodeURIComponent می‌زدند ممکن است دوبار رمزگشایی کنند.

چطور پروژه را به Next.js ۱۶ مهاجرت دهیم؟

مهاجرت به Next.js ۱۶ در بیشتر پروژه‌ها با codemod رسمی شروع و با تست دستی تمام می‌شود. ترتیب پیشنهادی ما برای مهاجرت نکست:

1. ابتدا پروژه را روی آخرین نسخه ۱۵.x ببرید و همه هشدارهای deprecation را برطرف کنید.
2. Node.js سرور، CI و Docker image را به ۲۰.۹ یا بالاتر ارتقا دهید.
3. روی یک شاخه جدا دستور npx @next/codemod@canary upgrade latest را اجرا کنید.
4. نتیجه codemod را بازبینی کنید؛ به‌خصوص params، cookies() و headers() که باید await شوند.
5. middleware.ts را به proxy.ts تغییر نام دهید.
6. اسکریپت lint را در package.json به اجرای مستقیم ESLint تغییر دهید.
7. اگر پیکربندی webpack سفارشی دارید، ساخت را با Turbopack امتحان کنید و در صورت شکست، موقتاً از --webpack استفاده کنید.
8. تنظیمات images و رفتار کش را بازبینی کنید و پیش از انتشار، تست کامل روی staging انجام دهید.

جزئیات بیشتر در راهنمای رسمی ارتقا به نسخه ۱۶ آمده است. چون Next.js ۱۶ روی React ۱۹ بنا شده، مرور ویژگی‌های جدید React در مقاله React ۱۹.۳؛ View Transitions و Fragment Refs هم مفید است.

React Compiler در Next.js ۱۶ را فعال کنیم یا نه؟

پشتیبانی از React Compiler در Next.js ۱۶ پایدار شده، اما به‌طور پیش‌فرض خاموش است. React Compiler کامپوننت‌ها را به‌صورت خودکار memoize می‌کند تا رندرهای غیرضروری کم شود و نیاز به نوشتن دستی useMemo و useCallback کاهش یابد. برای فعال‌سازی باید گزینه reactCompiler: true را در next.config بگذارید و پکیج babel-plugin-react-compiler را نصب کنید.

اطلاعیه رسمی یک هزینه را صریحاً ذکر کرده است: چون React Compiler به Babel متکی است، زمان کامپایل در توسعه و ساخت افزایش می‌یابد. پیشنهاد ما این است که ابتدا روی یک شاخه جدا فعالش کنید، زمان ساخت و رفتار صفحات پرتعامل را اندازه بگیرید و فقط اگر بهبود محسوسی در روانی رابط کاربری دیدید، آن را نگه دارید. در پروژه‌هایی که کدهای قدیمی با الگوهای غیراستاندارد React دارند، کامپایلر ممکن است برخی کامپوننت‌ها را بهینه نکند و این طبیعی است.

محدودیت‌ها: چه زمانی ارتقا به Next.js ۱۶ را عقب بیندازیم؟

• اگر سرور یا هاست شما هنوز Node.js ۱۸ دارد و امکان ارتقا ندارید.
• اگر پروژه به صفحات AMP یا publicRuntimeConfig وابسته است و زمان بازنویسی ندارید.
• اگر پیکربندی webpack سفارشی پیچیده دارید که هنوز معادلی در Turbopack ندارد؛ فلگ --webpack فقط راه موقت است.
• اگر مخاطبان مهمی با مرورگرهای قدیمی‌تر از Safari ۱۶.۴ دارید.

البته عقب انداختن ارتقا به معنی عقب انداختن وصله امنیتی نیست؛ اگر هنوز روی ۱۵.x هستید، آخرین نسخه وصله‌شده همان شاخه را نصب کنید. React Server Components در دسامبر ۲۰۲۵ آسیب‌پذیری بحرانی اجرای کد از راه دور داشت و Next.js در سال ۲۰۲۶ چندین انتشار امنیتی داشته است.

از تجربه تیم siloow

تیم siloow وب‌اپ‌های مدیریتی و پنل‌های داخلی را با React و در برخی پروژه‌ها با Next.js می‌سازد. در مهاجرت پروژه‌ها، بیشترین زمان صرف codemod نشد؛ صرف پیدا کردن جاهایی شد که کد قدیمی به کش ضمنی App Router عادت کرده بود و فرض می‌کرد داده خودبه‌خود کش می‌شود. با Cache Components این فرض دیگر درست نیست و باید آگاهانه تصمیم گرفت چه چیزی کش شود. درس دوم ما ارتقای Node.js روی سرورهای داخلی بود که گاهی از خود Next.js وقت‌گیرتر است؛ پس آن را از ابتدا در برنامه بگذارید.

جمع‌بندی

• Next.js ۱۶ در ۲۱ اکتبر ۲۰۲۵ منتشر شد و Turbopack را باندلر پیش‌فرض کرد.
• Cache Components با "use cache" کش را صریح و اختیاری می‌کند.
• middleware.ts به proxy.ts تغییر نام داد و نسخه قدیمی منسوخ است.
• حداقل Node.js ۲۰.۹، دسترسی ناهم‌زمان به params و حذف next lint از مهم‌ترین تغییرات ناسازگارند.
• مهاجرت را با codemod رسمی شروع کنید و همیشه آخرین نسخه وصله‌شده را نصب کنید.

اگر وب‌اپلیکیشن Next.js دارید و برای مهاجرت امن به نسخه ۱۶، بهینه‌سازی سرعت یا نگهداری امنیتی به تیم فنی نیاز دارید، خدمات توسعه و پشتیبانی وب‌اپلیکیشن siloow را ببینید. برای تصمیم‌گیری درباره نوع پروژه هم مقاله تفاوت سایت و وب اپلیکیشن و برای وضعیت مالکیت React مقاله بنیاد ری اکت را بخوانید. خبرهای بعدی را در مگ siloow دنبال کنید.

منابع

• Next.js 16 — Next.js Blog
• Upgrading to Version 16 — Next.js Docs
• Next.js Blog (اطلاعیه‌های انتشار و امنیتی)

سوالات متداول درباره Next.js ۱۶