• Turbopack — по умолчанию и стабильный: до ×10 быстрее Fast Refresh и ×2–5 быстрее сборки; без настроек. Есть файловый кэш в dev (beta) для крупных репо.  • Cache Components с директивой "use cache": явное кеширование компонентов/страниц/функций + завершение истории PPR. Включается флагом cacheComponents: true.  • Маршрутизация стала «умнее»: дедупликация layout при префетче и инкрементальный prefetch (отмена офф-скрин, приоритет на hover, повторный prefetch при инвалидации). Меньше трафика на навигацию — без правок кода.  • DevTools MCP: интеграция с Model Context Protocol — ИИ-агенты видят роуты/логи/трейсы и подсказывают фиксы.  • proxy.ts вместо middleware.ts: чёткая граница сети, рантайм — Node.js. Для Edge остаётся устаревший middleware. Есть codemod. 

⸻

1) Быстрый апгрейд (копипаст)

npx @next/codemod@canary upgrade latest

npm i next@latest react@latest react-dom@latest

Если у вас кастомный webpack — теперь явно выбирайте режим: next build --webpack (оставить webpack) или мигрируйте на Turbopack. 

⸻

2) Cache Components на практике

next.config.ts

export default { cacheComponents: true, }

В компоненте/функции используйте директиву:

"use cache";

Новые API для согласованности: • revalidateTag(tag, "max" | "hours" | ... ) — SWR-инвалидация по профилю, теперь с обязательным вторым аргументом; • updateTag(tag) — только в Server Actions, «read-your-writes» сразу после записи; • при необходимости принудительно обходите кеш через refresh(). 

⸻

3) Навигация и префетч

Next.js 16 дедуплицирует layout и префетчит только недостающие части. Да, запросов может стать больше, но общий объём данных меньше — в реальном мире это быстрее. Ничего менять в коде не нужно. 

⸻

4) Turbopack: цифры и тюнинг

Turbopack теперь по умолчанию и вне experimental; конфиг на верхнем уровне turbopack. Для dev доступен FS-кэш: export default { experimental: { turbopackFileSystemCacheForDev: true } }

Если необходимо, можно временно остаться на webpack флагом --webpack. 

⸻

5) React Compiler

Поддержка стабильна, но по умолчанию выключена (включайте точечно и меряйте сборку — компилятор через Babel). reactCompiler: true + babel-plugin-react-compiler@latest. 

⸻

6) Важные изменения и требования • Node.js ≥ 20.9, TypeScript ≥ 5.1.  • Async Request APIs: синхронный доступ к params/id окончательно удалён — используйте await.  • next/image: новые дефолты (minimumCacheTTL=4h, изменение imageSizes/qualities) и защита для локальных изображений с query-строкой через images.localPatterns.search. 

⸻

7) План внедрения на неделю 1. Обновите ядро + прогоните codemod middleware → proxy. 2. Включите Cache Components на одном роуте, проставьте теги и проверьте revalidateTag("max")/updateTag. 3. Сравните навигацию до/после (объём трафика, TTI). 4. Для монореп — включите Turbopack FS-кэш и замерьте рестарты dev-сервера. 5. В отдельной ветке — включите React Compiler и снимите метрики повторных рендеров. 

Итог: v16 приносит не «игрушки», а чёткий контракт: явный кеш, быстрые сборки, умная навигация и ясные границы сети. Это помогает ship’ить быстрее и объяснять «почему оно работает». 🚀

#Nextjs16 #JavaScript #React #Turbopack #WebPerformance #Caching #SSR #RSC #DX #DevTools #Frontend #TypeScript #Nextjs16 #React #Turbopack #WebPerformance #JavaScript #TypeScript #Frontend #DX #SSR #Caching #DevTools #SoftwareDevelopment #APIs #VSCode #Documentation #Communication #Teamwork #DevOps #better #programming #developer #programmer #software #engineer #quality #webdeveloper #success #hit #achievement #it #golang #nodejs #reactjs #junior #senior #middle #evaluation #ai #nextjs #js #ts #webpack #upgradtion #update