Next.js 16: Turbopack по умолчанию, async params и next.config.ts для full-stack

[hannadev]

Next.js 16 меняет правила игры для full-stack приложений. Turbopack стал дефолтным бандлером - сборки в 2-5 раз быстрее, Fast Refresh до 10x шустрее. Async params и searchParams упрощают стриминг и concurrent рендер, а нативный next.config.ts избавляет от JS-магии.

Это решает боли больших проектов: долгие билды, блокирующий рендер, конфиг в JS вместо TS. Теперь код чище, оптимизации нативные, стейт кеша стабильный. Разберём, как мигрировать и выжать максимум из фич.

Turbopack по умолчанию - конец webpack-эры

Turbopack теперь дефолт во всех режимах: dev, build, даже в CI/CD. Это Rust-монстр с unified graph - один граф для client/server, никаких мульти-компиляторов. Incremental computation кеширует на уровне функций, lazy bundling собирает только запрошенное. В реальных аппах compile time падает на 67-900%, Fast Refresh летает.

На больших проектах это спасение: раньше webpack жрал минуты на cold start, Turbopack с file system caching (beta) стартует мгновенно. Поддержка postcss.config.ts, SRI, tree shaking dynamic imports. Server Fast Refresh перезагружает только changed модули - рендер сервера как в браузере.

Ключевые плюсы Turbopack:

• 2-5x быстрее production builds - без конфиг-чейнджей.
• 5-10x Fast Refresh - изменения видны instantly.
• Unified graph - client/server в одном графе, меньше overhead.
• Tree shaking на dynamic imports - бандл чище.

Опция	Dev	Prod	Что даёт
turbopackInferModuleSideEffects	true	true	Лучший tree shaking
turbopackScopeHoisting	false	true	Быстрее execution
turbopackClientSideNestedAsyncChunking	false	true	Оптимизированные чанки

Если webpack нужен - opt-out через флаг, но зачем?

Async params и searchParams - стриминг без блоков

Params и searchParams теперь Promise по дефолту. Раньше sync доступ блокировали рендер: Next.js ждал URL-parse, DB-валидацию, network. Async позволяет стримить shell страницы, пока params резолвятся в фоне. Идеально для concurrent rendering и streaming.

В page/layout компонентах типы меняются: params: Promise<{slug: string}>. Await’им и деструктурируем. generateStaticParams тоже async. Client’ы юзают useParams() хук. TypeScript типы строгие - [key: string]: string | string[] | undefined для searchParams.

Пример миграции:

// Next.js 15 - sync
export default function Page({ params }: { params: { id: string } }) {
  return <div>{params.id}</div>;
}

// Next.js 16 - async
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  return <div>{id}</div>;
}

Что обновить:

• Все page/layout с params/searchParams - добавь async/await.
• cookies(), headers(), draftMode() - тоже async.
• generateStaticParams - верни Promise.

Sync (старое)	Async (новое)	Почему лучше
params.id	await params	Стриминг shell
searchParams.sort	await searchParams	Concurrent рендер
Блокировка рендера	Background resolve	Быстрее TTFB

Нативный next.config.ts и новые caching APIs

Next.config.ts теперь нативный - никаких “use client” хаков или JS-конфига. TS из коробки, автокомплит, типизация. Turbopack понимает .ts конфиг без танцев. Плюс стабильные caching APIs: revalidateTag(), updateTag(), refresh() - точный контроль кеша без ISR-хаков.

Function-level caching через “use cache”. Cookies/headers async, deprecated флаги убраны (AMP, next lint). next/image с новыми дефолтами оптимизации. Middleware -> proxy.ts для чёткой network boundary.

Новый кеш в действии:

// lib/data.ts
"use cache";

export async function getRecommendations(userId: string) {
  const prefs = await fetchPreferences(userId);
  return await fetchRecommendations(prefs);
}

// API route для invalidation
import { updateTag } from 'next/cache';
export async function POST(req) {
  const { tag } = await req.json();
  await updateTag(tag);
  return Response.json({ ok: true });
}

Кешируй осознанно:

• revalidateTag(‘posts-1’) - инвалидируй по тегу.
• updateTag() - обнови без full revalidate.
• refresh() - принудительный рефреш роута.

Оптимизации full-stack под Next.js 16

Full-stack аппы выигрывают от комбо: Turbopack ускоряет бэкендерский рендер, async params - фронт-стриминг, TS-конфиг - maintainability. Pair с headless CMS (типа Strapi/Payload) - webhook’и на updateTag для instant invalidation. i18n централизованно, image security tightened.

В продакшене аудить breaking changes: async миграция, image defaults, removed AMP. CI/CD с Turbopack caching - билды летают. React 19.2 интеграция - новые хуки, compiler opts.

Потенциал огромный:

• Server Actions + async params = reactive full-stack.
• Turbopack traces - дебаг slow builds.
• Nested async chunking - меньше network.

Фичи, которые ждут доработки

Next.js 16 - солидный релиз, но Turbopack file system caching пока beta, некоторые webpack-plugins требуют адаптации. Async миграция в legacy коде - рутина, но скрипты ускорят. Стоит присмотреться к proxy.ts вместо middleware - чище архитектура.

Дальше ждём stable Turbopack в edge runtime, deeper React 19 фичи. Для full-stack подумайте о hybrid рендере: static + dynamic по тегам. Оптимизации бесконечны - экспериментируйте с cache components.