Next.js 16.3 Preview:
Мгновенная навигация и AI-инструменты

Два анонса за одну неделю

25 и 26 июня 2026 года команда Next.js опубликовала два значительных поста о том, что готовится в Next.js 16.3. Первый — Instant Navigations — решает давнюю проблему, из-за которой Server Components казались неотзывчивыми, вводя примитивы рендеринга Stream, Cache и Block. Второй — AI Improvements — расширяет инструментарий для разработки через AI-агентов: AGENTS.md, Skills, Agent Browser с React DevTools, действенные ошибки с кнопкой «Copy as prompt» и компактный MCP-сервер.

Обе функциональности доступны сегодня через npm-тег @preview. Стабильный релиз ожидается в ближайшие недели. В этой статье разберём каждую возможность с примерами кода и практическим контекстом.

Часть I — Instant Navigations

Проблема: клик, ожидание, результат

Одна из частых жалоб на приложения Next.js — медленная навигация. В серверном приложении клик по ссылке означает: ничего не происходит, сервер отвечает, появляется страница. Сравните с клиентским SPA, где клик мгновенно показывает «оболочку» следующей страницы, даже если часть данных ещё загружается. Эта мгновенная обратная связь и создаёт ощущение скорости.

Next.js 16.3 устраняет этот разрыв с помощью опциональных поведений, которые дают лучшее из двух миров: серверную архитектуру с отзывчивостью SPA.

Включение Cache Components

Чтобы попробовать новые возможности, включите флаг cacheComponents в конфигурации Next.js. В будущем мажорном релизе он станет поведением по умолчанию:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  cacheComponents: true,
  // ...
};

export default nextConfig;

Stream, Cache или Block

Когда маршрут использует await для загрузки данных на сервере, у вас есть три варианта:

// app/blog/[slug]/page.tsx
export const instant = false;

export default async function BlogPost({ params }) {
  const post = await fetchPost(params.slug);
  return <article>{post.content}</article>;
}

Partial Prefetching — переиспользуемые оболочки

Раньше Next.js отправлял запрос предзагрузки для каждой ссылки в области видимости. Если в сайдбаре было двадцать ссылок чатов — это двадцать запросов. Команда Next.js признаёт, что это было избыточно.

В 16.3 с partialPrefetching: true Next.js предзагружает одну переиспользуемую оболочку на маршрут, кешируя её на клиенте:

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
  // ...
};

Одна оболочка для /chat/[id], одна для /dashboard и так далее. Все ссылки на один маршрут используют общий кеш. Это также закладывает основу для офлайн-навигации — функция, которую команда исследует для будущего релиза.

Тестирование мгновенной навигации

Для проверки регрессий в мгновенных маршрутах Next.js 16.3 предоставляет хелпер instant() из @next/playwright:

import { expect, test } from '@playwright/test';
import { instant } from '@next/playwright';

test('заголовок продукта доступен мгновенно', async ({ page }) => {
  await page.goto('/products/shoes');

  await instant(page, async () => {
    await page.click('a[href="/products/hats"]');
    await expect(page.locator('h1')).toContainText('Baseball Cap');
    await expect(page.getByText('Проверка наличия...')).toBeVisible();
  });

  await expect(page.getByText('12 в наличии')).toBeVisible();
});

Часть II — AI-улучшения

Next.js 16.3 делает значительный шаг в разработке через AI-агентов. В 16.2 появились встроенная документация и next-browser. В 16.3 — полный набор инструментов для агентов: от автобновления AGENTS.md до официальных Skills и интеграции React DevTools.

Автобновление AGENTS.md

В 16.2 проекты, созданные через create-next-app, указывали AGENTS.md на docs внутри node_modules. В 16.3 next dev автоматически создаёт и обновляет этот указатель. Кодемод agents-md нужен только для проектов на 16.1 и ранее:

npx @next/codemod@canary agents-md

Блок вставляется только когда next dev обнаруживает AI-агента в окружении, и маркеры ещё не установлены. Отключить можно через agentRules: false в next.config.ts.

Официальные Skills

next-dev-loop

Предоставляет агенту полный цикл разработки: управление браузером, чтение консоли, отслеживание сетевых запросов и инспекцию React-дерева. Требует agent-browser v0.27+.

npx skills add vercel/next.js --skill next-dev-loop

next-cache-components-adoption

Включает Cache Components в проекте и проходит по приложению одну функцию за раз. Два режима: Incremental (один PR, который выводит маршруты из валидации) и Direct (применение на одной ветке).

npx skills add vercel/next.js --skill next-cache-components-adoption

next-cache-components-optimizer

Оптимизирует маршрут Cache Components для мгновенной навигации, выполняя цикл observe-fix-iterate. Делает скриншоты до и после каждого изменения и откатывает изменения, если визуальный результат не изменился.

npx skills add vercel/next.js --skill next-cache-components-optimizer

Agent Browser с React DevTools

Экспериментальный next-browser из 16.2 объединён с agent-browser CLI (v0.27+). Добавлена интеграция React DevTools:

• Просмотр дерева компонентов — react tree
• Инспекция отдельного компонента — react inspect <fiberId>
• Профилирование ререндеров — react renders start / stop
• Проверка Suspense-границ — react suspense --only-dynamic --json

Действенные ошибки с «Copy as Prompt»

С включёнными Cache Components каждый await на сервере становится осознанным выбором. Instant Insights показывает каждую блокирующую навигацию как ошибку с тремя вариантами — Stream, Cache или Block — и кнопкой «Copy as prompt», которая формирует готовую инструкцию для AI-агента. То же меню доступно в терминале при next build.

Документация в Markdown

Добавьте .md к любому URL документации Next.js, чтобы получить страницу в формате Markdown. Полный индекс доступен по адресу /docs/llms.txt, а /docs/llms-full.txt объединяет все страницы в один файл — любой агент, читающий llms.txt, может работать с документацией Next.js.

Значение для разработчиков

Next.js 16.3 — значительный сдвиг в двух направлениях одновременно. Instant Navigations устраняет разрыв в UX, который заставлял многих разработчиков выбирать SPA. AI-инструменты делают Next.js одним из самых агент-дружественных фреймворков, с документацией, которую агенты читают нативно, Skills для многошаговых рабочих процессов и ошибками, понятными и человеку, и AI.

Попробуйте preview уже сегодня. Полные подробности — в посте об Instant Navigations и AI Improvements от команды Next.js. Для более широкого сравнения фреймворков читайте мои React vs Vue vs Angular на русском и React vs Next.js.

FAQ

Попробуйте Preview

Установите Next.js 16.3 Preview, чтобы изучить Instant Navigations и AI-инструменты в своих проектах:

npm install next@preview

Включите новые возможности в next.config.ts и ознакомьтесь с документацией preview. Vercel также опубликовал Next Beats — открытый музыкальный плеер на GitHub, демонстрирующий все эти возможности в реальном коде.