Next.js 12

Как мы анонсировали на Next.js Conf, Next.js 12 — это наше самое масштабное обновление за всё время:

• Компилятор на Rust: Fast Refresh стал ~в 3 раза быстрее, а сборка — ~в 5 раз быстрее
• Middleware (бета-версия): Полная гибкость в Next.js с приоритетом кода над конфигурацией
• Поддержка React 18: Нативные API Next.js теперь поддерживаются, включая Suspense
• Поддержка AVIF в <Image />: Опциональное уменьшение размера изображений на 20%
• Bot-aware ISR Fallback: Оптимизация SEO для веб-краулеров
• Нативная поддержка ES Modules: Соответствие стандартизированной системе модулей
• Импорт по URL (альфа-версия): Импорт пакетов из любого URL без необходимости установки
• React Server Components (альфа-версия): Попробуйте уже сегодня, включая SSR-стриминг

Обновитесь сегодня, выполнив npm i next@latest.

Более быстрые сборки и Fast Refresh с компилятором на Rust

Мы стремимся сделать каждую сборку Next.js-приложения быстрее для продакшена и обеспечить мгновенную обратную связь при локальной разработке. Next.js 12 включает совершенно новый компилятор на Rust, использующий преимущества нативной компиляции.

Наш компилятор на Rust построен на SWC — открытой платформе для нового поколения быстрых инструментов. Мы оптимизировали сборку и компиляцию, добившись ~в 3 раза более быстрого обновления локально и ~в 5 раз более быстрой сборки для продакшена. Другие улучшения и функции включают:

Результаты использования нового компилятора на Rust с крупными кодовыми базами Next.js.

• Дальнейшее ускорение для крупных кодовых баз: Мы протестировали компилятор на Rust с некоторыми из самых больших кодовых баз Next.js в мире.
• Улучшенная наблюдаемость производительности: Next.js теперь выводит время Fast Refresh в консоль как для клиентской, так и для серверной компиляции, включая количество скомпилированных модулей и файлов.
• Улучшения в основе webpack: Мы внесли множество улучшений в webpack, включая оптимизацию Fast Refresh и повышение надежности on-demand entries.

Компиляция с использованием Rust в 17 раз быстрее, чем с Babel, и включена по умолчанию в Next.js 12, заменяя преобразование файлов JavaScript и TypeScript. Это потребовало переноса преобразований Babel в Next.js на Rust, включая совершенно новый парсер CSS на Rust, используемый для реализации трансформации styled-jsx.

Новый компилятор на Rust обратно совместим. Если у вас есть существующая конфигурация Babel, вы автоматически будете исключены из его использования. Мы планируем вскоре перенести парсинг для популярных библиотек, таких как styled-components, emotion и relay. Если вы используете пользовательскую настройку Babel, поделитесь своей конфигурацией.

Вы также можете включить использование компилятора на Rust для минификации. Это в 7 раз быстрее, чем Terser. Минификация пока является опциональной, пока не будет тщательно проверена, так как заменяет инфраструктуру, разрабатываемую годами.

module.exports = {
  swcMinify: true,
};

Помимо найма DongYoon Kang, создателя SWC, и Maia Teegarden, участника проекта Parcel, мы продолжаем инвестировать в экосистему Rust. Если у вас есть опыт работы с Rust, пожалуйста, подайте заявку, чтобы присоединиться к нашей команде.

Для получения дополнительной информации посмотрите нашу демонстрацию с Next.js Conf.

Знакомство с Middleware

Middleware позволяет использовать код вместо конфигурации. Это дает вам полную гибкость в Next.js, так как вы можете выполнять код до завершения запроса. На основе входящего запроса пользователя вы можете изменить ответ, переписав его, перенаправив, добавив заголовки или даже стримингуя HTML.

Middleware предоставляет полную гибкость внутри Next.js.

Middleware может использоваться для всего, что требует общей логики для набора страниц, включая:

• Аутентификацию
• Защиту от ботов
• Редиректы
• Перезаписи
• Флаги функций и A/B-тесты
• Расширенные требования к маршрутизации i18n
• И многое другое!

Middleware использует строгую среду выполнения, поддерживающую стандартные Web API, такие как fetch. Это работает из коробки с next start, а также на Edge-платформах, таких как Vercel, которые используют Edge Middleware.

Чтобы использовать Middleware в Next.js, вы можете создать файл pages/_middleware.js. В этом примере мы используем стандартный Web API Response (MDN):

export function middleware(req, ev) {
  return new Response('Hello, world!');
}

Для получения дополнительной информации посмотрите нашу демонстрацию с Next.js Conf и ознакомьтесь с документацией.

Подготовка к React 18

React 18 добавит такие функции, как Suspense, автоматическую батчизацию обновлений, API вроде startTransition и новый стриминговый API для серверного рендеринга с поддержкой React.lazy.

Мы тесно сотрудничали с командой React в Facebook, чтобы подготовить Next.js к React 18 по мере его приближения к стабильному релизу. Мы делаем эти функции доступными для тестирования уже сегодня в Next.js 12 под экспериментальным флагом.

npm install react@alpha react-dom@alpha

Серверный стриминг

Конкурентные функции в React 18 включают встроенную поддержку серверного Suspense и SSR-стриминга. Это позволяет рендерить страницы на сервере с использованием HTTP-стриминга. Это экспериментальная функция в Next.js 12, но после включения SSR будет использовать ту же строгую среду выполнения, что и Middleware.

Для включения используйте экспериментальный флаг concurrentFeatures: true:

module.exports = {
  experimental: {
    concurrentFeatures: true,
  },
};

React Server Components

React Server Components позволяют рендерить всё, включая сами компоненты, на сервере. Это принципиально отличается от рендеринга на стороне сервера (SSR), где HTML генерируется заранее. С Server Components не требуется JavaScript на стороне клиента, что ускоряет рендеринг страниц. Это улучшает пользовательский опыт, сочетая преимущества серверного рендеринга с интерактивностью на стороне клиента.

module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true,
  },
};

Next.js теперь позволяет выполнять загрузку данных на уровне компонента, выражая всё в виде JSX. Используя React Server Components, мы можем упростить процесс. Специальные функции, такие как getServerSideProps или getStaticProps, больше не нужны. Это соответствует модели React Hooks, где загрузка данных располагается рядом с компонентами.

Вы можете переименовать любую страницу Next.js в .server.js, чтобы создать Server Component, и импортировать клиентские компоненты прямо внутрь Server Components. Эти клиентские компоненты будут гидратироваться и становиться интерактивными, что позволит добавлять функциональность, например, голосование.

Сейчас мы работаем над Suspense на стороне сервера, выборочной гидратацией и потоковым рендерингом в Next.js и поделимся прогрессом в будущем блоге.

Особая благодарность нашим коллабораторам Kara Erickson и Gerald Monaco из команды Google Aurora за их работу над React 18 и Server Components.

Для получения дополнительной информации посмотрите нашу демонстрацию с Next.js Conf и ознакомьтесь с документацией.

Поддержка ES Modules и URL-импорты

ES modules представляют собой официальную, стандартизированную систему модулей для JavaScript. Они поддерживаются всеми основными браузерами, а также Node.js.

Этот стандарт продвигает экосистему веба, позволяя уменьшить размер пакетов и JavaScript-бандлов, что в итоге улучшает пользовательский опыт. Поскольку экосистема JavaScript переходит от Common JS (старого стандарта) к ES modules, мы стремимся помочь разработчикам постепенно внедрять эти улучшения без ненужных критических изменений.

Начиная с Next.js 11.1, мы добавили экспериментальную поддержку ES modules, которые теперь имеют приоритет над модулями CommonJS. В Next.js 12 это поведение стало стандартным. Импорт NPM-модулей, предоставляющих только CommonJS, по-прежнему поддерживается.

URL-импорты

Next.js 12 включает экспериментальную поддержку импорта ES Modules через URL без необходимости установки или отдельного шага сборки.

URL-импорты позволяют использовать любой пакет напрямую через URL. Это позволяет Next.js обрабатывать удалённые HTTP(S)-ресурсы так же, как локальные зависимости.

Если обнаружен URL-импорт, Next.js создаст файл next.lock для отслеживания удалённых ресурсов. URL-импорты кешируются локально, чтобы обеспечить работу в оффлайн-режиме. Next.js поддерживает URL-импорты как для клиента, так и для сервера.

Чтобы включить эту функцию, добавьте разрешённые URL-префиксы в next.config.js:

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev'],
  },
};

Затем вы можете импортировать модули напрямую из URL:

import confetti from 'https://cdn.skypack.dev/canvas-confetti';

Любой CDN, предоставляющий ES modules, будет работать, включая no-code и дизайн-инструменты, такие как Framer:

• Skypack
• esm.sh
• jsDelivr
• JSPM
• unpkg

Для получения дополнительной информации посмотрите нашу демонстрацию с Next.js Conf и ознакомьтесь с документацией.

ISR Fallback с учётом ботов

В настоящее время Incremental Static Regeneration с fallback: true отображает состояние загрузки перед рендерингом содержимого страницы при первом запросе к ещё не сгенерированной странице. Чтобы заблокировать загрузку страницы (и выполнить серверный рендеринг), необходимо использовать fallback: 'blocking'.

В Next.js 12 веб-краулеры (например, поисковые боты) автоматически будут использовать серверный рендеринг для ISR-страниц с fallback: true, сохраняя предыдущее поведение состояния загрузки для User-Agents, не являющихся краулерами. Это предотвращает индексацию состояний загрузки краулерами.

Уменьшение размера изображений с помощью AVIF

Встроенный API оптимизации изображений теперь поддерживает формат AVIF, что позволяет уменьшить размер изображений на 20% по сравнению с WebP.

Оптимизация AVIF-изображений может занимать больше времени по сравнению с WebP, поэтому эта функция включается вручную с помощью нового свойства images.formats в next.config.js:

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

Этот список форматов используется для определения формата оптимизированного изображения на основе заголовка Accept в запросе. Поскольку AVIF указан первым, он будет использоваться, если браузер поддерживает AVIF. Если нет, будет использоваться WebP, если браузер поддерживает WebP. Если ни один из форматов не поддерживается, будет использован исходный формат изображения.

Трассировка выходных файлов

В Next.js 8 мы представили опцию target. Она позволяла выводить страницы Next.js в виде автономных JavaScript-бандлов, объединяя все зависимости с помощью webpack во время сборки. Мы быстро поняли, что это не идеально, и вместо этого создали @vercel/nft. @vercel/nft использовался более 2 лет во всех деплоях на платформе Vercel.

Теперь мы вносим эти улучшения непосредственно в Next.js по умолчанию, для всех платформ развёртывания, предлагая значительно улучшенный подход по сравнению с опцией target.

Next.js 12 автоматически трассирует файлы, необходимые для каждой страницы и API-роута, используя @vercel/nft, и выводит результаты трассировки рядом с результатом next build, что позволяет интеграторам использовать трассировки, предоставляемые Next.js автоматически.

Эти изменения также оптимизируют приложения, развёртываемые с помощью таких инструментов, как Docker, через next start. Используя @vercel/nft, мы сможем сделать вывод Next.js автономным в будущем. Для запуска приложения не потребуется устанавливать зависимости, что значительно уменьшит размер Docker-образа.

Интеграция @vercel/nft в Next.js заменяет подход с target, делая target устаревшим в Next.js 12. Ознакомьтесь с документацией для получения дополнительной информации.

Другие улучшения

• Добавление pages/_app.js или pages/_document.js в ваше приложение теперь автоматически заменяет встроенную версию без необходимости перезапуска CLI Next.js.
• Интеграция ESLint теперь поддерживает проверку отдельных файлов в next lint с флагом --file.
• Next.js 12 теперь поддерживает указание пользовательского пути к tsconfig.json.
• Теперь поддерживается next.config.mjs для написания конфигурации в виде ES modules.
• Повторяющиеся запросы теперь дедуплицируются для getStaticProps.
• Проверка статических страниц теперь выполняется с использованием общего пула воркеров.
• Fast Refresh теперь использует WebSocket-соединение вместо EventSource.

Критические изменения

• После того как webpack 5 стал стандартным в Next.js 11, мы официально удалили webpack 4. Мы тесно сотрудничали с сообществом, чтобы обеспечить плавный переход на webpack 5.
• Опция target в next.config.js больше не нужна.
• next/image теперь использует span в качестве обёртки вместо div.
• Минимальная версия Node.js увеличена с 12.0.0 до 12.22.0, которая является первой версией Node.js с нативной поддержкой ES modules.

Чтобы узнать больше, ознакомьтесь с руководством по обновлению.

Сообщество

Пять лет назад мы выпустили Next.js в открытый доступ. Мы стремились создать React-фреймворк с нулевой конфигурацией, который упростит ваш опыт разработки. Оглядываясь назад, поразительно видеть, как выросло сообщество и что мы смогли создать вместе. Давайте продолжать.

Next.js — это результат совместной работы более 1800 разработчиков, отраслевых партнёров, таких как Google и Facebook, и нашей основной команды.

Этот релиз стал возможен благодаря вкладу: @ka2n, @housseindjirdeh, @rojserbest, @lobsterkatie, @thibautsabot, @javivelasco, @sokra, @rishabhpoddar, @kdy1, @huozhi, @georgegach, @ionut-botizan, @paul-creates, @TimBarley, @kimizuy, @devknoll, @matamatanot, @christianvuerings, @pgrodrigues, @mohamedbhy, @AlfonzAlfonz, @kara, @molebox, @angelopoole, @oste, @genetschneider, @jantimon, @kyliau, @mxschmitt, @PhattOZ, @finn-orsini, @kriswuollett, @harryheman, @GustavoEdinger, @AryanBeezadhur, @Blevs, @colevscode, @atcastle, @ijjk, @velocity23, @jonowu, @timneutkens, @whitep4nth3r, @micro-chipset, @TyMick, @padmaia, @arthurdenner, @vitorbal, @zNeb, @jacksonhardaker, @shuding, @kylemh, @Bundy-Mundi, @ctjlewis, @thien-do, @leerob, @Dev-CasperTheGhost, @janicklas-ralph, @rezathematic, @KonstHardy, @fracture91, @lorensr, @Sheraff, @HaNdTriX, @emilio, @oluan, @ddzieduch, @colinclerk, @x4th, @volcareso, @oiva, @sinchang, @scottrepreneur, @smakosh, @catnose99, @adrienharnay, @donsn, @andersonleite, @msp5382, @tim-hanssen, @appsplash99, @alexvilchis, @RobEasthope, @royal, @Perry-Olsson, @well-balanced, @mrmckeb, @buraksakalli, @espipj, @prateekbh, @AleksaC, @eungyeole, и @rgabs