نسخه جدید Next.js 16 پیش از برگزاری رویداد Next.js Conf 2025 منتشر شد.
این نسخه شامل بهبودهای قابلتوجهی در Turbopack، سیستم Caching و معماری کلی Next.js است. از زمان انتشار نسخه بتا، قابلیتها و ارتقاهای متعددی به این فریمورک افزوده شده است:
use cache برای navigation سریعتر و بهینهتر.middleware.ts با proxy.ts بهمنظور شفافسازی network boundaryها.برای یادآوری، قابلیتهای زیر از نسخه بتای قبلی همچنان در دسترس هستند:
updateTag() و بهبود عملکرد revalidateTag().useEffectEvent() و <Activity/>.next/image و سایر اصلاحات ساختاری.ارتقا به نسخه Next.js 16
>_ terminal # 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
در مواردی که ابزار codemod قادر به ارتقای کامل کد به نسخه جدید نباشد، توصیه میشود راهنمای رسمی ارتقا در مستندات Next.js مطالعه شود.
Cache Componentها مجموعهای از قابلیتهای جدید هستند که با هدف افزایش شفافیت و انعطافپذیری در فرآیند Caching طراحی شدهاند.
در مرکز این قابلیتها، دستور جدید use cache قرار دارد که میتوان از آن برای کش کردن صفحات، کامپوننتها و توابع استفاده کرد. این دستور از کامپایلر React برای تولید خودکار کلیدهای کش در محل استفاده بهره میبرد.
برخلاف کشینگ ضمنی در نسخههای قبلی App Router، در این نسخه کشینگ کاملاً اختیاری (opt-in) است. بهصورت پیشفرض، تمام کدهای داینامیک در صفحات، layoutها و مسیرهای API در زمان درخواست اجرا میشوند. این رفتار جدید، تجربهای منطبقتر با انتظارات توسعهدهندگان از یک فریمورک Full-stack واقعی فراهم میکند.
Cache Componentها در واقع تکمیلکننده مفهوم Partial Pre-Rendering (PPR) هستند که نخستین بار در سال ۲۰۲۳ معرفی شد. پیش از PPR، نکستجیاس مجبور بود برای هر مسیر تصمیم بگیرد که محتوای آن بهصورت استاتیک یا داینامیک رندر شود؛ هیچ حالت میانی وجود نداشت.
PPR این محدودیت را برطرف کرد و اجازه داد بخشی از صفحات استاتیک بهصورت داینامیک (با استفاده از Suspense) رندر شوند، بدون آنکه سرعت بارگذاری اولیه صفحات دچار مشکل شود.
برای فعال کردن Cache Components، باید آن را در فایل next.config.ts تنظیم کنیم:
// next.config.ts
const nextConfig = {
cacheComponents: true,
};
export default nextConfig;
توجه: همانطور که در نسخه بتا اعلام شد، تنظیمات آزمایشی experimental.ppr و سایر گزینههای مرتبط حذف شدهاند و اکنون باید از پیکربندی Cache Components استفاده کنیم.
در نسخه Next.js 16 قابلیت جدیدی با عنوان Next.js DevTools MCP معرفی شده است. این ابزار با Model Context Protocol ادغام میشود تا Debugging هوشمند با کمک هوش مصنوعی را ممکن سازد و بینشی دقیق از وضعیت برنامه در اختیار توسعهدهندگان قرار دهد.
Next.js DevTools MCP به agentهای هوش مصنوعی اجازه میدهد تا به اطلاعات زیر دسترسی داشته باشند:
این قابلیت باعث میشود agentهای هوش مصنوعی بتوانند خطاها را شناسایی، رفتار برنامه را تحلیل و پیشنهادهای رفع خطا را بهصورت بلادرنگ در جریان توسعه ارائه دهند.
در این نسخه، فایل proxy.ts جایگزین middleware.ts شده است تا network boundary اپلیکیشن را شفافتر شود. فایل proxy.ts در runtime مربوط به Node.js اجرا میشود.
برای اعمال تغییر:
middleware.ts به proxy.ts تغییر میدهیم.proxy تغییر میدهیم.دلیل این تغییر:
افزایش شفافیت در نامگذاری و ایجاد یک runtime واحد و قابل پیشبینی برای رهگیری درخواستها.
// proxy.ts
export default function proxy(request: NextRequest) {
return NextResponse.redirect(new URL('/home', request.url));
}
توجه: فایل middleware.ts همچنان برای Edge Runtime در دسترس است، اما در وضعیت منسوخ شده قرار دارد و در نسخههای آینده حذف خواهد شد.
در نسخه Next.js 16، لاگهای مربوط به درخواستها در حالت development بازطراحی شدهاند تا زمان صرفشده در هر مرحله از اجرای برنامه را دقیقتر نمایش دهند.
مراحل لاگها شامل موارد زیر هستند:
GET / 200 in 17ms (compile: 1ms, render: 16ms) GET / 200 in 19ms (compile: 1ms, render: 17ms) GET / 200 in 19ms (compile: 1ms, render: 18ms) GET / 200 in 17ms (compile: 1ms, render: 16ms) GET / 200 in 18ms (compile: 1ms, render: 16ms) GET / 200 in 17ms (compile: 1ms, render: 16ms) GET / 200 in 22ms (compile: 2ms, render: 20ms) GET / 200 in 24ms (compile: 2ms, render: 23ms)
در فرآیند build، تیم توسعهدهنده نمایش جدیدی اضافه کرده که زمان صرفشده در هر گام را بهصورت مجزا نشان میدهد؛ این تغییر باعث افزایش شفافیت و درک بهتر عملکرد build شده است.
>_ terminal ▲ 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
در بخش بعدی مقاله سایر قابلیتهایی که پیشتر در نسخهی بتا معرفی شده بودند را بررسی میکنیم.
در نسخه 16 Next.js، ابزار Turbopack به مرحله پایداری کامل رسیده و اکنون در هر دو محیط development و production قابل استفاده است. از این نسخه به بعد، Turbopack بهصورت پیشفرض باندلر اصلی تمام پروژههای جدید Next.js خواهد بود.
از زمان انتشار نسخه بتا در تابستان امسال، میزان استفاده از Turbopack رشد قابل توجهی داشته است؛ بهطوری که:
با استفاده از Turbopack انتظار میرود:
Turbopack بهصورت پیشفرض فعال است تا تمام توسعهدهندگان Next.js بتوانند بدون نیاز به تنظیمات خاص، از این بهبودهای عملکردی بهرهمند شوند.
در صورت استفاده از پیکربندی سفارشی webpack، همچنان میتوان با اجرای دستور زیر از webpack استفاده کرد:
>_ terminal next dev --webpack next build --webpack
Turbopack اکنون از File System Caching در حالت توسعه پشتیبانی میکند. این قابلیت خروجیهای کامپایلر را روی دیسک ذخیره میکند تا در اجرای مجدد پروژه، زمان کامپایل بهطور قابلتوجهی کاهش یابد، بهویژه در پروژههای بزرگ و چندماژوله.
برای فعالسازی کش فایل سیستم در تنظیمات پروژه، کافی است پیکربندی زیر را اضافه کنیم:
// next.config.ts
const nextConfig = {
experimental: {
turbopackFileSystemCacheForDev: true,
},
};
export default nextConfig;
تمام اپلیکیشنهای داخلی Vercel اکنون از این قابلیت استفاده میکنند و گزارشها نشان میدهد که بهرهوری توسعهدهندگان در پروژههای بزرگ بهطور قابلتوجهی افزایش یافته است.
ابزار create-next-app اکنون با فرآیند راهاندازی سادهتر، ساختار پروژه بهروز و تنظیمات پیشفرض بهینه بازطراحی شده است.
الگوی جدید شامل موارد زیر است:
در ادامه پیشنهاد رسمی (RFC) مربوط به Build Adapterها، تیم توسعه Next.js با همکاری جامعه متنباز و پلتفرمهای دیپلوی، نخستین نسخه آلفا از Build Adapters API را منتشر کرده است.
Build Adapterها این امکان را فراهم میکنند تا آداپتورهای سفارشی ایجاد کنیم که در فرآیند build مداخله کرده و به پلتفرمهای دیپلوی یا ابزارهای سفارشی اجازه دهند:
// next.config.js
const nextConfig = {
experimental: {
adapterPath: require.resolve('./my-adapter.js'),
},
};
module.exports = nextConfig;
در نسخه Next.js 16، پشتیبانی داخلی از React Compiler به مرحله پایدار رسیده است. این بهروزرسانی پس از انتشار نسخه 1.0 کامپایلر React انجام شد و اکنون توسعهدهندگان میتوانند بدون تغییر در کد، از memoization خودکار و جلوگیری از رندرهای غیرضروری بهرهمند شوند.
گزینه پیکربندی reactCompiler از حالت experimental خارج شده و اکنون در وضعیت پایدار قرار دارد، اما هنوز بهصورت پیشفرض فعال نیست؛ چراکه تیم توسعه در حال جمعآوری دادههای عملکردی از پروژههای گوناگون است.
نکته: فعالسازی این قابلیت ممکن است زمان کامپایل را در حالت development و build افزایش دهد، زیرا React Compiler بر پایه Babel عمل میکند.
// next.config.ts
const nextConfig = {
reactCompiler: true,
};
export default nextConfig;
برای نصب جدیدترین نسخه افزونه React Compiler میتوانیم از دستور زیر استفاده کنیم:
>_ terminal npm install babel-plugin-react-compiler@latest
نسخه Next.js 16 با بازطراحی کامل سیستم مسیریابی و Navigation همراه است تا جابهجایی بین صفحات سریعتر و بهینهتر شود.
حذف تکرار layoutها:
زمانی که چندین لینک با layout مشترک را prefetch میکنیم، layout فقط یکبار دانلود میشود، نه برای هر لینک بهصورت جداگانه. بهعنوان مثال، در صفحهای با ۵۰ لینک محصول، layout مشترک تنها یکبار دریافت میشود که این موضوع باعث کاهش چشمگیر حجم دادههای منتقلشده میگردد.
Prefetch افزایشی:
در این نسخه، Next.js تنها بخشهایی از صفحه را prefetch میکند که در کش وجود ندارند، بهجای بارگذاری کامل صفحات. کش prefetch اکنون دارای رفتارهای جدیدی است:
نکته: ممکن است تعداد درخواستهای prefetch افزایش یابد، اما حجم کلی دادههای منتقلشده بهطور محسوسی کاهش خواهد یافت. تیم توسعه Next.js این توازن را برای اغلب اپلیکیشنها بهینه میداند.
تمام این تغییرات بهصورت خودکار اعمال میشوند و نیازی به تغییر در کد پروژه وجود ندارد.
در نسخه 16 نکستجیاس، APIهای مربوط به کشینگ بازطراحی شدهاند تا کنترل دقیقتری بر رفتار کش فراهم شود.
تابع revalidateTag() اکنون دارای پارامتر دوم با نام cacheLife profile است تا از رفتار 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');
آرگومان profile میتواند شامل نامهای از پیش تعریفشده مانند 'max'، 'hours' یا 'days' باشد، یا بهصورت یک پروفایل سفارشی در فایل next.config تعریف شود. همچنین میتوان یک آبجکت inline مانند { expire: number } را نیز ارسال کرد.
برای اکثر موارد، توصیه میشود از مقدار 'max' استفاده شود تا اعتبارسنجی دادهها در پسزمینه انجام گیرد. در این حالت، زمانی که کاربران محتوای تگشده را درخواست میکنند، دادهی کششده فوراً بازمیگردد و سپس در پسزمینه بهروزرسانی میشود.
از تابع revalidateTag() زمانی استفاده میکنیم که بخواهیم فقط دادههای کش شده مرتبط با یک تگ خاص را بهصورت SWR منقضی کنیم. این روش برای محتوای استاتیک که اندکی تأخیر در بهروزرسانی را تحمل میکند، ایدهآل است.
راهنمای انتقال: برای فعالسازی رفتار SWR، پارامتر دوم (مثلاً 'max') را به تابع اضافه میکنیم، یا در صورتی که نیاز به رفتار read-your-writes داریم، باید از تابع updateTag() در Server Actionها استفاده نماییم.
تابع updateTag() یک API جدید مخصوص Server Actionها است که رفتار read-your-writes را فراهم میکند؛ به این معنا که دادهها را منقضی کرده و بلافاصله نسخه جدید را در همان درخواست بازیابی میکند:
'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() نیز یک API جدید ویژهی Server Actionها است که تنها دادههای 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() در سمت کلاینت است و زمانی کاربرد دارد که بخواهیم دادههای داینامیک مانند اعلانها، آمار لحظهای یا وضعیتها را پس از انجام یک عمل بهروزرسانی کنیم، بدون اینکه ساختار کلی صفحه یا دادههای کش شده آن دستخوش تغییر شود.
App Router در نسخه Next.js 16 از آخرین نسخه React Canary استفاده میکند. این نسخه شامل ویژگیهای جدید React 19.2 و قابلیتهایی است که بهصورت تدریجی در حال پایدار شدن هستند.
نکات برجسته در این نسخه عبارتاند از:
useEffectEvent: قابلیت استخراج منطقهای غیرواکنشی از افکتها و تبدیل آنها به توابع مستقل و قابل استفاده مجدد.display: none، در حالی که state حفظ میشود و افکتها بهدرستی پاکسازی میشوند.جزئیات بیشتر دربارهی این قابلیتها در اطلاعیه رسمی انتشار React 19.2 در دسترس است.
Next.js اکنون در نسخه جدید فقط از Node.js 20.9.0 (LTS) و بالاتر پشتیبانی میکند و پشتیبانی از نسخه ۱۸ را متوقف کرده است. همچنین حداقل نسخه تایپ اسکریپت به 5.1.0 افزایش یافته است.
حداقل نسخه مرورگرهای پشتیبانیشده عبارتاند از:
تیم توسعهدهنده در این نسخه تمام قابلیتهای منقضیشده قبلی را حذف کرده است:
– پشتیبانی از AMP بهطور کامل حذف شده و تمام APIها و تنظیمات مرتبط از جمله useAmp و export const config = { amp: true } دیگر در دسترس نیستند.
– دستور next lint نیز حذف شده است؛ از این پس باید از ابزارهای Biome یا ESLint بهصورت مستقیم استفاده شود. اجرای next build دیگر lint را انجام نمیدهد. برای انتقال میتوان از ابزار npx @next/codemod@canary next-lint-to-eslint-cli . استفاده کرد.
– گزینههای appIsrStatus، buildActivity و buildActivityPosition از تنظیمات مربوط به devIndicators حذف شدهاند، اما خود indicator همچنان باقی است.
– پارامترهای serverRuntimeConfig و publicRuntimeConfig دیگر پشتیبانی نمیشوند و باید از متغیرهای محیطی (.env) استفاده شود.
– پیکربندی experimental.turbopack از بخش experimental خارج و به سطح بالای تنظیمات با نام turbopack منتقل شده است.
– flag experimental.dynamicIO به cacheComponents تغییر نام داده است و flag experimental.ppr نیز حذف شده است؛ این قابلیت در حال تحول به مدل برنامهنویسی جدیدی تحت عنوان Cache Components است.
– export مسیر در سطح route با عنوان export const experimental_ppr نیز حذف شده و به مدل جدید Cache Components منتقل گردیده است.
– رفتار پیشفرض scroll-behavior: smooth غیرفعال شده است؛ برای فعالسازی مجدد، میتوان ویژگی data-scroll-behavior="smooth" را به المنت HTML افزود.
– تابع unstable_rootParams() حذف شده و API جایگزین آن در نسخههای آتی ارائه خواهد شد.
– دسترسی synchronous به params و searchParams دیگر پشتیبانی نمیشود و باید از نسخه asynchronous آنها با استفاده از await params و await searchParams استفاده شود.
– همچنین دسترسی synchronous به cookies()، headers() و draftMode() نیز حذف شده و باید از نسخه asynchronous آنها یعنی (await cookies()، await headers() و await draftMode()) بهره برد.
– در مسیرهای metadata برای تصاویر، آرگومان params اکنون بهصورت asynchronous تعریف شده است و id بازگردانده شده از تابع generateImageMetadata باید از نوع Promise<string> باشد.
– در صورتی که از next/image برای مسیرهای لوکال همراه با query string استفاده میشود، لازم است گزینه images.localPatterns در تنظیمات فعال گردد تا از حملات enumeration جلوگیری شود.
در نسخه 16، رفتار پیشفرض برخی قابلیتها تغییر کرده است:
– Turbopack اکنون بهصورت پیشفرض بهعنوان bundler تمام برنامهها عمل میکند. در صورت نیاز به استفاده از webpack میتوان از دستور next build --webpack استفاده کرد.
– دایرکتوریهای خروجی برای next dev و next build از هم جدا شدهاند تا امکان اجرای همزمان فرآیندها فراهم شود.
– مکانیزم جدیدی برای lockfile اضافه شده تا از اجرای همزمان چند نمونه next dev یا next build در یک پروژه جلوگیری شود.
– پکیج sass-loader به نسخه ۱۶ ارتقا یافته است که از سینتکس مدرن Sass و قابلیتهای جدید آن پشتیبانی میکند.
– مقدار پیشفرض images.minimumCacheTTL از ۶۰ ثانیه به ۴ ساعت (۱۴۴۰۰ ثانیه) افزایش یافته است تا هزینه revalidation برای تصاویری که هدر مناسب ندارند، کاهش یابد.
– اندازه 16 از مقادیر پیشفرض images.imageSizes حذف شده است؛ زیرا تنها در حدود ۴.۲ درصد از پروژهها مورد استفاده قرار میگرفت.
– مقدار پیشفرض images.qualities از بازه [1..100] به مقدار ثابت [75] تغییر یافته است. ویژگی quality اکنون به نزدیکترین مقدار موجود در images.qualities گرد میشود.
– برای افزایش امنیت، سیستم Next.js بهصورت پیشفرض از بهینهسازی تصاویر در IPهای محلی جلوگیری میکند. در شبکههای خصوصی، میتوان با تنظیم مقدار images.dangerouslyAllowLocalIP: true آن را فعال کرد.
– مقدار پیشفرض images.maximumRedirects برای تصاویر از حالت نامحدود به 3 مورد کاهش یافته است. در صورت نیاز، میتوان آن را افزایش داد یا با مقدار ۰ غیرفعال کرد.
– افزونه @next/eslint-plugin-next اکنون از فرمت جدید ESLint Flat Config استفاده میکند که با نسخه ۱۰ ESLint سازگار است؛ زیرا در آینده، پیکربندی قدیمی دیگر پشتیبانی نخواهد شد.
– تیم توسعهدهنده رفتار prefetch cache را بازنویسی کرده و اکنون از مکانیزمهای deduplication و prefetching مرحلهای استفاده میکند.
– signature تابع revalidateTag() تغییر کرده و اکنون نیازمند پارامتر دوم cacheLife برای کنترل رفتار stale-while-revalidate است.
– در Turbopack، در صورت وجود تنظیمات Babel، این ابزار بهصورت خودکار فعال میشود (در نسخههای قبلی موجب خطا میشد).
– خروجی Terminal اکنون با قالببندی خواناتر، پیامهای خطای شفافتر و شاخصهای عملکردی دقیقتر طراحی شده است.
– تمام مسیرهای parallel اکنون به فایل صریح default.js نیاز دارند. در صورت نبود این فایل، فرآیند build با خطا مواجه میشود. برای حفظ رفتار قبلی، میتوان فایلی ایجاد کرد که در آن notFound() فراخوانی شود یا مقدار null بازگرداند.
در نسخه ۱۶ Next.js، برخی قابلیتها در وضعیت منسوخ شده قرار گرفتهاند و در نسخههای آینده حذف خواهند شد:
– فایل middleware.ts باید به proxy.ts تغییر نام داده شود تا network boundary و تمرکز عملکرد routing شفافتر باشند.
– کامپوننت next/legacy/image دیگر توصیه نمیشود و بهتر است از next/image بهعنوان جایگزین بهینهتر استفاده شود.
– پیکربندی images.domains نیز بهمنظور افزایش امنیت با images.remotePatterns جایگزین شده است.
– تابع revalidateTag() با تنها یک آرگومان منسوخ شده است. باید از نسخه جدید آن با دو آرگومان revalidateTag(tag, profile) برای SWR یا از updateTag(tag) در بخش Actionها استفاده شود.
در نسخه 16 Next.js، بهینهسازیهای چشمگیری در عملکرد دستورات next dev و next start اعمال شده است.
همچنین، پشتیبانی از اجرای مستقیم تایپ اسکریپت در Node.js برای فایل پیکربندی next.config.ts اضافه شده است.
برای فعالسازی این قابلیت، میتوان از دستور زیر استفاده کرد:
next dev --experimental-next-config-strip-types
تیم توسعهدهنده اعلام کرده است که پیش از انتشار نسخه پایدار، راهنمای جامعتری برای ارتقا به نسخه ۱۶ Next.js در مستندات رسمی ارائه خواهد شد.
نسخه 16 Next.js گامی مهم در مسیر مدرنسازی و بهینهسازی تجربهی توسعهدهندگان محسوب میشود. با جایگزینی کامل Turbopack، بهبود مدیریت کش، سازگاری با React 19.2 و حذف قابلیتهای قدیمی، این نسخه تمرکز ویژهای بر کارایی، امنیت و سادگی توسعه دارد.