بررسی کامل Next.js 16.4: همه‌ی قابلیت‌ها.

نسخه‌ی 16.4 از Next.js روز ۶ اکتبر ۲۰۲۶ منتشر شد. این نسخه بیشتر روی دو چیز تمرکز داره: مدل Cache Components که حالا مدل پیشنهادی Vercel شده، و بهبودهای Turbopack که توسعه رو سریع‌تر و خروجی رو سبک‌تر می‌کنه.

Cache Components، مدل پیشنهادی

Vercel حالا Cache Components رو برای همه‌ی اپ‌ها پیشنهاد می‌کنه. توی create-next-app به‌صورت پیش‌فرض روشنه و طبق گزارش Roboto Studio برنامه اینه که توی Next.js 17 پیش‌فرض بشه. پروژه‌های موجود تا اون موقع اختیاری می‌مونن. برای فعال کردنش دو تا فلگ داری:

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
}

export default nextConfig

کامپوننت‌ها با دایرکتیو use cache علامت می‌خورن و طول عمر کش با cacheLife مشخص می‌شه:

import { cacheLife } from 'next/cache'

export async function Posts() {
  'use cache'
  cacheLife('hours')
  const posts = await getPosts()
  return <PostList posts={posts} />
}

ensureStatic، تضمین استاتیک بودن در زمان بیلد

این یکی از جدیدترین ایده‌هاست. از یه page یا layout می‌تونی ensureStatic رو export کنی تا بیلد خودش چک کنه صفحه واقعاً استاتیک هست یا نه:

export const ensureStatic = 'navigation'

سه سطح وجود داره: shell، prefetch و navigation، و هر سطح شامل سطح‌های قبلیه. این قابلیت فقط با cacheComponents کار می‌کنه و بدون اون فلگ، بیلد fail می‌شه. با سطح navigation، چیزهای زیر باعث شکست بیلد می‌شن:

• fetch یا کوئری دیتابیس بدون کش
• استفاده از cookies و headers
• searchParams سمت سرور
• scopeهای use cache با طول عمر کمتر از ۵ دقیقه
• پاس دادن promiseهای وابسته به request به کامپوننت‌های کلاینت

این خطاها حتی داخل Suspense هم می‌مونن. مسیرهای داینامیک هم باید generateStaticParams رو با حداقل یه مجموعه‌ی کامل پارامتر export کنن، و این قانون برای generateMetadata هم صدق می‌کنه. layout فرزند می‌تونه سطح سخت‌گیرانه‌تر از والد بذاره ولی ضعیف‌تر نه. ensureStatic با instant فرق داره؛ instant درباره‌ی اینه که UI بتونه فوری آپدیت بشه.

navigation() و prefetch()

دو تابع جدید از next/cache هستن که کنترل می‌دن چی prefetch بشه. navigation رو با await صدا بزنی، زیردرخت پایینش از prefetch بیرون می‌ره و فقط موقع ناوبری واقعی رندر می‌شه. prefetch هم زیردرخت رو از App Shell مشترک خارج می‌کنه و فقط موقع Link با prefetch صریح یا ناوبری رندر می‌شه. هر دو به cacheComponents نیاز دارن. توی نوت‌های ریلیز گیت‌هاب اشاره شده پیشوند unstable از این دو تا برداشته شده، پس ایمپورتشون رو بعد از آپدیت حتماً چک کن.

ابزارهای مخصوص coding agentها

دو قابلیت آزمایشی برای کار با agentها اضافه شده. اولی دستور آپگرید با حالت agentه:

npx next@canary upgrade --agent=latest

سه policy داره: security (پیش‌فرض، نسخه‌ی آسیب‌پذیر رو به نزدیک‌ترین نسخه‌ی امن می‌بره)، latest (به آخرین نسخه‌ی npm می‌بره) و experimental-future (به latest می‌بره و راهنمای اتخاذ Cache Components رو هم آماده می‌کنه). یه نکته: نوت‌های ریلیز گیت‌هاب اسم این فلگ رو ai نوشته و Roboto Studio اسمش رو agent. من نتونستم صفحه‌ی رسمی رو بخونم، پس قبل از استفاده help خود دستور رو چک کن. کانفیگ مکمل هم experimental.agentUpgrade هست که با مقدارهای security، latest یا false، توی next dev و next build یادآوری آپگرید نشون می‌ده.

دومی experimental.agentFeedback هست. به coding agent اجازه می‌ده خطاهای فریمورک، مستندات نامفهوم و workaroundها رو ثبت کنه و پیش‌نویس گزارش بسازه. تا خودت دکمه‌ی Send feedback رو نزنی چیزی ارسال نمی‌شه. برای پروژه‌های جدید create-next-app روشنه، برای پروژه‌های موجود opt-in هست، تله‌متری Next.js لازم داره و توی CI اجرا نمی‌شه.

بهبودهای Turbopack

این‌ها بدون هیچ کانفیگی فعالن:

• کش دیسکی ۲۰ تا ۲۵ درصد کوچیک‌تر شده (Zstandard برای داده و LZ4 برای متادیتا)
• HMR سرور به‌صورت lazy: بعد از ویرایش یه ماژول مشترک سرور، فقط صفحه‌ی فعلی دوباره کامپایل می‌شه
• یه runtime chunk مشترک برای همه‌ی routeها
• باندل‌های پروداکشن کوچیک‌تر با اسم‌های کوتاه‌تر برای کلاس‌های CSS Module و export mangling

طبق نوت‌های ریلیز، export name mangling حالا برای بیلدهای Turbopack پیش‌فرضه، پس اگه کدت به اسم export ها وابسته‌ست بعد از آپدیت تستش کن.

React 19.3

React 19.3 طبق گفته‌ی Roboto Studio ۹ سپتامبر منتشر شده و Next.js 16.4 ازش پشتیبانی می‌کنه. تغییراتش:

• View Transitions پایدار شده، با addTransitionType برای انیمیشن‌های جهت‌دار
• Fragment Refs پایدار شده
• API پایدار browser که با use(browser()) برای کدهایی که به مقدارهای مخصوص مرورگر نیاز دارن استفاده می‌شه
• پشتیبانی از Trusted Types
• رندر Context مستقیم از Server Components بدون Provider

فلگ‌های آزمایشی

زیر کلید experimental توی next.config.ts این‌ها اضافه شدن:

const nextConfig: NextConfig = {
  reactCompiler: true,
  experimental: {
    turbopackRustReactCompiler: true,
    turbopackGc: true,
    turbopackLazyDynamicImports: true,
    turbopackPluginRuntimeStrategy: 'workerThreads',
  },
}

• turbopackRustReactCompiler: نسخه‌ی Rust کامپایلر React. نویسنده‌ی Roboto Studio ۳۰ درصد حافظه‌ی کمتر و ۱۵ درصد کامپایل سریع‌تر گزارش کرده، که عدد خودشه و رسمی نیست.
• turbopackGc: garbage collection برای داده‌های کامپایل قدیمی، هم توی حافظه هم روی دیسک.
• turbopackLazyDynamicImports: dynamic importهای سمت کلاینت توی dev فقط موقع اولین درخواست کامپایل می‌شن. بعضی importهای next/dynamic هنوز eager کامپایل می‌شن.
• turbopackPluginRuntimeStrategy با مقدار workerThreads: Babel، PostCSS و loaderهای webpack رو توی worker thread اجرا می‌کنه، نه child process. روی Node.js نسخه‌ی 24.13.1 و بالاتر به child process برمی‌گرده.
• turbopackAdditionalRoots: بهش اجازه می‌ده وابستگی‌های symlink شده بیرون از ریشه‌ی پروژه رو دنبال کنه، مثلاً پکیج‌های لوکال لینک‌شده یا store سراسری pnpm. فعلاً دستی ست می‌شه.

بقیه‌ی چیزها: Turbopack Bundle Analyzer حالا خلاصه‌ی بزرگ‌ترین routeهای کلاینت، نمای جدولی، snapshot برای مقایسه و جدا کردن مسیر بحرانی رندر از وابستگی‌های async رو داره. یه skill هم برای بهینه‌سازی باندل هست:

npx skills add vercel/next.js --skill next-bundle-optimizer

طبق نوت‌های گیت‌هاب این‌ها هم اضافه شدن: گزینه‌ی آزمایشی imgOptMozjpeg برای next/image، ارتقا به web-vitals نسخه‌ی 6 با گزارش soft navigation، و یه entrypoint تایپ به اسم next/cache-handlers.

نکات آپگرید

لیست رسمی breaking change من پیدا نکردم، ولی نوت‌های ریلیز چند تغییر مهم دارن: حذف تنظیم experimental.appNewScrollHandler، منسوخ شدن پشتیبانی از React 18 توی Pages Router، فعال شدن strict route matching به‌صورت پیش‌فرض، و حذف unstable_eager. آپگرید پایه:

npm install next@latest react@latest react-dom@latest

React رو باید دستی بالا ببری، چون peer range هنوز هر React 19 رو قبول می‌کنه. توی monorepoها اگه دو کپی Next توی گراف تایپ‌ها بود، نویسنده‌ی Roboto Studio با override توی pnpm-workspace.yaml حلش کرد (بعد از اجرای pnpm why next):

overrides:
  "next@<16.4.0": 16.4.0

همون نویسنده گزارش داده دستور upgrade با فلگ agent وقتی روی یه زیرپوشه اجرا شد fail شد، چون CLI ایمپورت نسبی توی next.config.ts رو از مسیر اشتباه پیدا می‌کرد، و اجرا از داخل پوشه‌ی خود اپ جواب داد. اگه Cache Components رو برای یه اپ موجود روشن کنی ممکنه خطا ببینی، و با ensureStatic برابر navigation اون خطاها خطای بیلد می‌شن.

جمع‌بندی

اگه پروژه‌ی جدید می‌سازی، Cache Components از همون اول فعاله و ensureStatic یه راه خوب برای قفل کردن استاتیک بودن صفحه‌هاست. برای پروژه‌ی قدیمی، آپگرید رو بکن ولی Cache Components رو جداگانه و با تست روشن کن. بهبودهای Turbopack بدون هیچ کاری از طرف تو می‌رسن.

منابع:

• Next.js Blog
• Release v16.4.0 · vercel/next.js
• Next.js 16.4: Cache Components, ensureStatic, agent ... - Roboto Studio
• Next.js Updates - Releasebot