Версия 12

Для обновления до версии 12 выполните следующую команду:

Terminal

npm install next@12

yarn add next@12

pnpm update next@12

bun add next@12

Обновление до 12.2

Промежуточное ПО (Middleware) - Если вы использовали Middleware до версии 12.2, ознакомьтесь с руководством по обновлению для получения дополнительной информации.

Обновление до 12.0

Минимальная версия Node.js - Минимальная версия Node.js была увеличена с 12.0.0 до 12.22.0, которая является первой версией Node.js с нативной поддержкой ES Modules.

Минимальная версия React - Минимальная требуемая версия React - 17.0.2. Для обновления выполните следующую команду в терминале:

Terminal

npm install react@latest react-dom@latest

yarn add react@latest react-dom@latest

pnpm update react@latest react-dom@latest

bun add react@latest react-dom@latest

Next.js теперь использует компилятор на основе Rust SWC для компиляции JavaScript/TypeScript. Этот новый компилятор работает до 17 раз быстрее Babel при компиляции отдельных файлов и до 5 раз быстрее при обновлении страницы без перезагрузки (Fast Refresh).

Next.js обеспечивает полную обратную совместимость с приложениями, имеющими пользовательскую конфигурацию Babel. Все преобразования, которые Next.js обрабатывает по умолчанию, такие как styled-jsx и tree-shaking для getStaticProps / getStaticPaths / getServerSideProps, были перенесены на Rust.

Если приложение имеет пользовательскую конфигурацию Babel, Next.js автоматически откажется от использования SWC для компиляции JavaScript/TypeScript и вернется к использованию Babel так же, как это было в Next.js 11.

Многие интеграции со сторонними библиотеками, которые в настоящее время требуют пользовательских преобразований Babel, будут перенесены на преобразования SWC на основе Rust в ближайшем будущем. К ним относятся, но не ограничиваются:

Styled Components
Emotion
Relay

Чтобы расставить приоритеты для преобразований, которые помогут вам перейти на SWC, пожалуйста, предоставьте ваш .babelrc в этой ветке обсуждения.

Замена Terser на SWC для минификации

Вы можете включить замену Terser на SWC для минификации JavaScript с ускорением до 7 раз, используя флаг в next.config.js:

next.config.js

module.exports = {
  swcMinify: true,
}

Минификация с использованием SWC является опциональным флагом, чтобы обеспечить тестирование на большем количестве реальных приложений Next.js перед тем, как она станет стандартной в Next.js 12.1. Если у вас есть отзывы о минификации, пожалуйста, оставьте их в этой ветке обсуждения.

Улучшения парсинга CSS в styled-jsx

В дополнение к компилятору на основе Rust мы реализовали новый парсер CSS, основанный на том, что используется для преобразования Babel в styled-jsx. Этот новый парсер имеет улучшенную обработку CSS и теперь выдает ошибки при использовании недопустимого CSS, который ранее мог проскользнуть и вызвать неожиданное поведение.

Из-за этого изменения недопустимый CSS будет вызывать ошибку во время разработки и при выполнении next build. Это изменение затрагивает только использование styled-jsx.

Изменение элемента-обертки в `next/image`

next/image теперь рендерит <img> внутри <span> вместо <div>.

Если ваше приложение имеет специфический CSS, нацеленный на span, например .container span, обновление до Next.js 12 может некорректно совпасть с элементом-оберткой внутри компонента <Image>. Вы можете избежать этого, ограничив селектор конкретным классом, например .container span.item, и обновив соответствующий компонент с этим className, например <span className="item" />.

Если ваше приложение имеет специфический CSS, нацеленный на тег <div> в next/image, например .container div, он может больше не совпадать. Вы можете обновить селектор до .container span или, предпочтительно, добавить новую обертку <div className="wrapper"> вокруг компонента <Image> и нацелиться на нее, например .container .wrapper.

Пропс className не изменился и по-прежнему будет передаваться базовому элементу <img>.

Подробнее см. в документации.

Подключение HMR теперь использует WebSocket

Ранее Next.js использовал соединение server-sent events для получения событий HMR. В Next.js 12 теперь используется соединение WebSocket.

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

location /_next/webpack-hmr {
    proxy_pass http://localhost:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

Если вы используете Apache (2.x), вы можете добавить следующую конфигурацию для включения веб-сокетов на сервере. Проверьте порт, имя хоста и имена серверов.

<VirtualHost *:443>
 # ServerName yourwebsite.local
 ServerName "${WEBSITE_SERVER_NAME}"
 ProxyPass / http://localhost:3000/
 ProxyPassReverse / http://localhost:3000/
 # Next.js 12 использует websocket
 <Location /_next/webpack-hmr>
    RewriteEngine On
    RewriteCond %{QUERY_STRING} transport=websocket [NC]
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteRule /(.*) ws://localhost:3000/_next/webpack-hmr/$1 [P,L]
    ProxyPass ws://localhost:3000/_next/webpack-hmr retry=0 timeout=30
    ProxyPassReverse ws://localhost:3000/_next/webpack-hmr
 </Location>
</VirtualHost>

Для пользовательских серверов, таких как express, вам может потребоваться использовать app.all, чтобы убедиться, что запрос передается корректно, например:

app.all('/_next/webpack-hmr', (req, res) => {
  nextjsRequestHandler(req, res)
})

Поддержка Webpack 4 удалена

Если вы уже используете webpack 5, вы можете пропустить этот раздел.

Next.js принял webpack 5 в качестве стандарта для компиляции в Next.js 11. Как было сообщено в документации по обновлению до webpack 5, Next.js 12 удаляет поддержку webpack 4.

Если ваше приложение все еще использует webpack 4 с помощью опционального флага, вы теперь увидите ошибку со ссылкой на документацию по обновлению до webpack 5.

Опция `target` устарела

Если у вас нет target в next.config.js, вы можете пропустить этот раздел.

Опция target была объявлена устаревшей в пользу встроенной поддержки трассировки зависимостей, необходимых для запуска страницы.

Во время выполнения next build Next.js автоматически отслеживает каждую страницу и ее зависимости, чтобы определить все файлы, необходимые для развертывания production-версии вашего приложения.

Если вы в настоящее время используете опцию target со значением serverless, пожалуйста, ознакомьтесь с документацией о том, как использовать новый output.