В Next.js 15 Turbopack радикально ускоряет разработку в крупных монрепо. Он делает Hot Module Replacement (HMR) мгновенным даже при тысячах модулей. Это решает проблему долгих перезагрузок, которая тормозит команды.

React 19 добавляет useOptimistic для оптимистичных обновлений UI. В связке с Turbopack это дает отзывчивость без задержек. Полезно для full-stack приложений с большим кодом, где каждая секунда на счету.

Что такое Turbopack и почему он идеален для монрепо

Turbopack - это новый бандлер от Vercel, который в Next.js 15 стал стабильным для dev-режима. Он в 700 раз быстрее Webpack и в 10 раз быстрее Vite. В крупных монрепо с сотнями пакетов обычные бандлеры тратят минуты на HMR, что убивает продуктивность.

Turbopack использует Rust для параллельной обработки модулей. Добавлены tree shaking и лимит памяти - бандлы меньше на 20-30%, RAM падает на 25-30%. Сборка тяжелых страниц ускоряется на 30-50%. В монрепо это значит, что изменения в одном пакете обновляются за миллисекунды.

Ключевые фичи Turbopack:

• Tree Shaking: Удаляет неиспользуемый код автоматически, уменьшая размер бандла.
• Memory Limit: В next.config.js задается лимит, например 512MB, чтобы избежать OOM-ошибок.
• Fast Refresh: HMR в 5-10 раз быстрее, идеально для монрепо с shared кодом.
• 100% тест покрытие: Стабильность на уровне продакшена.

В монрепо с TypeScript это спасение - Turbopack понимает зависимости между пакетами.

React 19 и useOptimistic: мгновенные обновления UI

React 19 приносит useOptimistic - хук для оптимистичных мутаций. Он обновляет UI сразу, до ответа сервера, делая формы и списки отзывчивыми. В Next.js 15 это интегрируется с Server Actions для full-stack без лишних запросов.

В крупных проектах задержки сети убивают UX. useOptimistic показывает ‘сохранено’ мгновенно, откатывая при ошибке. С Turbopack HMR обновляет такие компоненты без пауз. Пример: в дашборде с таблицей данных - добавление строки видно сразу.

Как использовать:

1. Импортируйте useOptimistic из ‘react’.
2. Создайте optimistic состояние: const [optimisticState, addOptimistic] = useOptimistic(state, (state, newItem) => [...state, newItem]);.
3. В Server Action: addOptimistic(newItem); перед мутацией.

Пример кода для формы:

const [state, setState] = useState([]);
const [optimisticState, addOptimistic] = useOptimistic(state, (current, newTodo) => [...current, newTodo]);

const addTodo = async (formData) => {
  addOptimistic({ id: Date.now(), text: formData.get('text'), done: false });
  'use server';
  // серверная мутация
};

Нюанс: optimistic состояние должно быть сериализуемым для SSR.

Интеграция Turbopack с React 19 в монрепо

В монрепо настройка простая через create-next-app или миграцию. Turbopack активируется флагом turbo в next dev. React 19 подхватывается автоматически при обновлении. HMR работает кросс-пакетно - меняете утилиту в одном, обновляется везде.

Проблемы старых бандлеров в монрепо - это кэш-миссы и дубликаты. Turbopack решает это глобальным кэшем и incremental builds. С useOptimistic добавляется PPR (Partial Pre-Rendering) для статических частей. Результат: dev-сервер стартует за секунды.

Шаги настройки:

• Обновите Next.js: npx @next/codemod@canary next-add-turbo.
• В next.config.js: experimental: { turbo: { treeShaking: true, memoryLimit: 512 * 1024 * 1024 } }.
• Добавьте React 19: npm i react@19 react-dom@19.
• Запустите next dev --turbo.

Преимущества в монрепо:

• Кросс-пакет HMR: Изменения в UI пакете мгновенно в app.
• Масштаб: До 10k+ модулей без тормозов.
• Стабильность: Меньше ошибок гидратации с React 19.

Turbopack меняет dev в монрепо навсегда

Turbopack с React 19 useOptimistic поднимает скорость разработки на новый уровень. В крупных проектах HMR становится неощутимым, UI - сверхотзывчивым. Остается доработать продакшен-версию Turbopack и интеграцию с React Forget.

Дальше думайте о PPR и edge-рендеринге для скейлинга. Эти инструменты упрощают full-stack, но требуют переосмысления паттернов с RSC.