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

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

npm i next@11 react@17 react-dom@17

yarn add next@11 react@17 react-dom@17

pnpm up next@11 react@17 react-dom@17

bun add next@11 react@17 react-dom@17

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

Webpack 5

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

Очистка distDir теперь включена по умолчанию

Директория сборки (по умолчанию .next) теперь очищается автоматически, за исключением кэшей Next.js. Подробнее об этом можно узнать в RFC по очистке distDir.

Если ваше приложение полагалось на предыдущее поведение, вы можете отключить новое поведение, добавив флаг cleanDistDir: false в next.config.js.

Поддержка переменной PORT для next dev и next start

Next.js 11 поддерживает переменную окружения PORT для установки порта, на котором запускается приложение. Использование -p/--port по-прежнему рекомендуется, но если у вас были ограничения на использование -p, теперь вы можете использовать PORT в качестве альтернативы:

Пример:

PORT=4000 next start

Настройка next.config.js для импорта изображений

Next.js 11 поддерживает статический импорт изображений с помощью next/image. Эта новая функция требует возможности обработки импорта изображений. Если вы ранее добавляли пакеты next-images или next-optimized-images, вы можете либо перейти на встроенную поддержку с использованием next/image, либо отключить эту функцию:

module.exports = {
  images: {
    disableStaticImages: true,
  },
}

Удаление super.componentDidCatch() из pages/_app.js

Метод componentDidCatch компонента next/app был объявлен устаревшим в Next.js 9, так как он больше не нужен, и с тех пор не выполнял никаких действий. В Next.js 11 он был удален.

Если ваш pages/_app.js содержит пользовательский метод componentDidCatch, вы можете удалить super.componentDidCatch, так как он больше не требуется.

Удаление Container из pages/_app.js

Этот экспорт был объявлен устаревшим в Next.js 9, так как он больше не нужен, и с тех пор не выполнял никаких действий, выводя предупреждение во время разработки. В Next.js 11 он был удален.

Если ваш pages/_app.js импортирует Container из next/app, вы можете удалить его, так как он был удален. Подробнее в документации.

Удаление использования props.url в компонентах страниц

Это свойство было объявлено устаревшим в Next.js 4 и с тех пор выводило предупреждение во время разработки. С появлением getStaticProps / getServerSideProps эти методы уже запрещали использование props.url. В Next.js 11 это свойство было полностью удалено.

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

Удаление свойства unsized в next/image

Свойство unsized в next/image было объявлено устаревшим в Next.js 10.0.1. Вместо него можно использовать layout="fill". В Next.js 11 свойство unsized было удалено.

Удаление свойства modules в next/dynamic

Свойства modules и render для next/dynamic были объявлены устаревшими в Next.js 9.5. Это было сделано для того, чтобы API next/dynamic стал ближе к React.lazy. В Next.js 11 свойства modules и render были удалены.

Эти свойства не упоминались в документации с Next.js 8, поэтому маловероятно, что ваше приложение их использует.

Если ваше приложение использует modules и render, обратитесь к документации.

Удаление Head.rewind

Head.rewind не выполнял никаких действий с Next.js 9.5, в Next.js 11 он был удален. Вы можете безопасно удалить использование Head.rewind.

Локали Moment.js исключены по умолчанию

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

Для загрузки конкретной локали используйте следующий код:

import moment from 'moment'
import 'moment/locale/ja'

moment.locale('ja')

Вы можете отказаться от этого нового поведения, добавив excludeDefaultMomentLocales: false в next.config.js, если не хотите использовать новую оптимизацию. Однако настоятельно рекомендуется не отключать эту оптимизацию, так как она значительно уменьшает размер Moment.js.

Обновление использования router.events

Если вы обращаетесь к router.events во время рендеринга, в Next.js 11 router.events больше не предоставляется во время предварительного рендеринга. Убедитесь, что вы обращаетесь к router.events в useEffect:

useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    console.log(
      `Приложение переходит на ${url} ${
        shallow ? 'с' : 'без'
      } поверхностной маршрутизации`
    )
  }

  router.events.on('routeChangeStart', handleRouteChange)

  // Если компонент размонтирован, отпишитесь
  // от события с помощью метода 'off':
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

Если ваше приложение использует router.router.events, который был внутренним свойством и не был публичным, убедитесь, что вы также используете router.events.

Обновление с React 16 до 17

React 17 представил новое JSX-преобразование, которое привнесло давнюю функцию Next.js в экосистему React: отсутствие необходимости в import React from 'react' при использовании JSX. При использовании React 17 Next.js автоматически использует новое преобразование. Это преобразование не делает переменную React глобальной, что было непреднамеренным побочным эффектом предыдущей реализации Next.js. Доступен кодмод для автоматического исправления случаев, когда вы случайно использовали React без его импорта.

Большинство приложений уже используют последнюю версию React. В Next.js 11 минимальная версия React была обновлена до 17.0.2.

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

npm install react@latest react-dom@latest

Или с использованием yarn:

yarn add react@latest react-dom@latest