Версия 11

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

Terminal

npm install next@11

yarn add next@11

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, либо отключить эту функцию:

next.config.js

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

On this page