Как обновиться до версии 12

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

npm i next@12 react@17 react-dom@17 eslint-config-next@12

yarn add next@12 react@17 react-dom@17 eslint-config-next@12

pnpm up next@12 react@17 react-dom@17 eslint-config-next@12

bun add next@12 react@17 react-dom@17 eslint-config-next@12

Полезно знать: Если вы используете TypeScript, убедитесь, что также обновили @types/react и @types/react-dom до соответствующих версий.

Обновление до версии 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. Для обновления выполните следующую команду в терминале:

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

Замена Babel на SWC

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:

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), вы можете добавить следующую конфигурацию для включения web-сокетов на сервере. Проверьте порт, имя хоста и имена серверов.

<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.