App Router представляет собой новую основу для будущего Next.js, но мы признаем, что есть возможности улучшить этот опыт. Мы хотели бы поделиться обновлением о наших текущих приоритетах.
В предстоящих релизах Next.js мы сосредоточены на следующих направлениях:
- Улучшение производительности
- Повышение стабильности
- Развитие образовательных материалов для разработчиков
App Router
Для начала полезно дать некоторый контекст о том, как был спроектирован App Router.
Выход за пределы Pages Router через интеграцию с React
По мере роста популярности Next.js и создания более масштабных приложений мы получили обратную связь от сообщества и выявили области, где начали достигать пределов возможностей Pages Router.
Наиболее заметно, что Pages Router не был разработан для потоковой передачи (streaming) — фундаментальной концепции современного React, которая помогает решать ограничения, с которыми мы столкнулись, и реализовать долгосрочное видение Next.js.
Создание API фреймворка, поддерживающих потоковую передачу для получения данных, загрузки ресурсов и метаданных страниц, а также использование новых возможностей React потребовали значительных изменений в базовой архитектуре Next.js.
Мы воспользовались возможностью построить систему на основе новейших конкурентных возможностей React, таких как Server Components, Suspense и других, которые были разработаны для потоковых архитектур.
Постепенное внедрение — обязательное условие
Мы не хотели, чтобы наше сообщество было вынуждено полностью переписывать приложения для обновления до последней версии Next.js. Мы считаем, что постепенное внедрение — лучшая стратегия для эволюции приложений со временем.
- Постепенная миграция по маршрутам: Без полного переписывания приложения вы можете перенести отдельный маршрут на App Router и начать использовать новые функции в удобном для вас темпе. См. наше руководство по постепенному внедрению или посмотрите обучающее видео.
- Простой откат: Если вас не устраивает производительность или удобство работы с App Router, вы можете легко вернуться к Pages Router для конкретного маршрута.
Мы исследуем дополнительные возможности для ещё большего упрощения постепенного внедрения.
Путь к стабильности
Мы начали разработку App Router для Next.js более года назад и с тех пор последовательно выпускаем новые функции и улучшения.
- Первое объявление: В мае того года мы опубликовали RFC, чтобы обозначить наши планы по повышению гибкости маршрутизации и макетов.
- Ранняя бета-версия: В Next.js 13 мы выпустили первую версию App Router, позволив сообществу опробовать её и предоставить раннюю обратную связь.
- Стабильный API: Учитывая обратную связь, мы сосредоточились на завершении основного API. В версии 13.4 мы объявили основное API App Router стабильным и готовым к широкому использованию.
Наши текущие приоритеты
Объявление стабильности сигнализировало сообществу, что основное API окончательно и не будет подвергаться значительным изменениям, требующим переписывания кода.
С тех пор мы получили множество ценных отзывов, а увеличение использования неизбежно выявило ошибки и возможности для дальнейшего улучшения.
Мы хотим, чтобы вы знали: мы ещё не удовлетворены опытом работы с App Router, и это наш главный приоритет на ближайшее время. Давайте обсудим работу, которую мы проводим для улучшения этого опыта.
Улучшение производительности
В ближайшие месяцы мы сосредоточимся на трёх аспектах производительности: скорости локальной разработки, времени сборки и производительности в serverless-среде.
Производительность локальной разработки
По мере развития Next.js и роста размера приложений, построенных на нём, мы постепенно заменяем части его базовой архитектуры более быстрыми и масштабируемыми инструментами.
-
Прогресс миграции: Мы начали с замены Babel (компиляция) и Terser (минификация) на SWC. Это помогло улучшить скорость локальной разработки и время сборки.
-
Долгосрочные инвестиции: Сохранение высокой производительности Fast Refresh независимо от размера приложения требует, чтобы Next.js работал как можно более инкрементально во время локальной разработки, пакетируя и компилируя код только по мере необходимости.
Именно поэтому мы сейчас работаем над заменой webpack (пакетирование) на Turbopack, который построен на движке инкрементальных вычислений низкого уровня, позволяющем кэшировать вплоть до отдельных функций.
Приложения Next.js, перешедшие на Turbopack, увидят устойчивое улучшение скорости Fast Refresh даже при увеличении их размера.
В последние несколько месяцев команда Turbo сосредоточилась на улучшении производительности Turbopack и поддержки всех функций Next.js и API App Router.
Turbopack сейчас доступен в бета-версии (
next dev --turbo). -
Улучшение текущей архитектуры: Помимо инвестиций в будущее, мы продолжаем вносить улучшения производительности в нашу текущую архитектуру на основе webpack.
Для некоторых приложений Next.js, особенно тех, которые обновляют тысячи модулей, мы получали сообщения о нестабильности локальной разработки и Fast Refresh. Мы работаем над улучшением производительности и надёжности в этой области. Например, мы недавно добавили предварительно настроенные параметры (
modularizeImports) для работы с большими библиотеками иконок, которые могут случайно заставлять тысячи модулей перезагружаться при каждом запросе.
Производительность сборки
Мы также работаем над сборкой production-версий с Turbopack (next build --turbo) и уже начали внедрять первые части этой работы. Ожидайте больше обновлений в предстоящих релизах.
Производительность в production
Наконец, в Vercel мы работаем над оптимизацией производительности и использования памяти Vercel Functions, определяемых через код приложения Next.js, обеспечивая минимальное время холодного старта при сохранении преимуществ масштабируемой serverless-архитектуры. Эта работа привела к появлению новых возможностей трассировки (экспериментальных) в Next.js и первым исследованиям в области серверных инструментов для разработчиков.
Повышение стабильности
Pages Router существует уже шесть лет. Выпуск App Router означал введение новых API, которым всего шесть месяцев. Мы прошли долгий путь за короткое время, но есть ещё возможности для улучшений по мере того, как мы узнаём больше от нашего сообщества и их опыта использования.
Мы благодарны сообществу за готовность активно внедрять App Router и предоставлять обратную связь. Было множество отчётов об ошибках, которые мы исследуем, и мы благодарны за минимальные воспроизведения, которые вы создали, чтобы помочь изолировать проблемы и проверить исправления.
Начиная с версии 13.4, мы уже исправили ряд серьёзных ошибок, влияющих на стабильность, которые доступны в последнем патче (13.4.7). Мы продолжим интенсивно работать над производительностью и стабильностью.
Развитие образовательных материалов для разработчиков
Хотя мы считаем, что новые функции App Router и современного React мощные, они также требуют дополнительного обучения и документации, чтобы помочь освоить эти новые концепции.
Функции Next.js
В течение последнего года мы работали над полной переработкой документации Next.js. Эта работа теперь доступна на nextjs.org/docs. Мы хотели бы выделить некоторые важные моменты:
- Переключение между Pages и App: Вы можете переключаться между изучением документации Pages Router или App Router с помощью кнопки в левой части документации. Кроме того, вы можете фильтровать результаты поиска в зависимости от выбранного роутера.
- Улучшенное содержание и архитектура информации: Почти каждая страница документации App Router была обновлена, включая более чёткую структуру и связность между страницами, а также сотни новых иллюстраций, чтобы визуально объяснить, как работает Next.js.
- Ещё впереди: Здесь нам предстоит ещё много работы. Команда Developer Experience в Vercel усердно трудится над созданием дополнительных учебных ресурсов (включая обновлённый курс на
/learn, посвящённый App Router) и примеров реальных кодовых баз (включая переработку Next.js Commerce).
Мы будем выпускать новый контент в документации, на Twitter, YouTube и других платформах.
Новые функции React
Мы также услышали ваши отзывы о необходимости обучения новым функциям React, доступным в App Router Next.js.
-
Server Components: Важно отметить, что такие функции, как Server Components, и соглашения, такие как директива
"use client", не являются специфичными для Next.js, а представляют собой часть более широкой экосистемы React.Наша команда, наши партнёры в Meta и другие независимые участники работают над предоставлением большего количества обучающих материалов по этим темам. Эти концепции ещё молоды, но мы уверены в экосистеме React и продолжающемся обучении.
-
Client Components: В свете недавних обсуждений Server Components важно отметить, что клиентские компоненты не являются деоптимизацией. Клиент — валидная часть модели React, и он никуда не исчезает.
Вы можете рассматривать клиентские компоненты как существующую сегодня экосистему Next.js, где ваши любимые библиотеки и инструменты продолжают работать. Например, частый вопрос, который мы видим: нужно ли добавлять
"use client"в каждый файл, чтобы сделать его клиентским компонентом. Это не обязательно, но мы понимаем, что эти концепции новые и потребуется время для их изучения. Вам нужно только обозначить верхнюю границу, где ваш код переходит с сервера на клиент. Эта архитектура позволяет вам переплетать серверные и клиентские компоненты. -
Развитие сторонней экосистемы: Помимо обучения, экосистема вокруг новых функций React продолжает расти. Например, Panda CSS, CSS-in-JS библиотека от создателей Chakra UI, недавно объявила о поддержке React Server Components.
-
Server Actions (альфа): Server Actions позволяют выполнять мутации данных на сервере, уменьшают клиентский JavaScript и обеспечивают прогрессивное улучшение форм. Мы пока не рекомендуем использовать Server Actions в production. Мы благодарны за ранние отзывы тестировщиков альфа-версии, которые помогают нам формировать будущее этой функции.
Благодарности
Мы благодарны многим из вас за выбор Next.js для обучения и разработки.
Наша сосредоточенность на производительности, стабильности и удобстве разработчиков будет отражена в предстоящих релизах Next.js. Мы хотим, чтобы работа с Next.js была приятной — и делала вас (и вашу команду) более продуктивными.
Как всегда, мы очень ценим вашу обратную связь. Если вы столкнулись с какими-либо проблемами в Next.js, пожалуйста, создайте issue или начните новое обсуждение, и мы изучим их.