Версия 11

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

Terminal

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

Terminal

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

Terminal

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

Terminal

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

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, вы можете удалить Container, так как он был удалён. Подробнее в документации.

Удаление использования `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(
      `App is changing to ${url} ${
        shallow ? 'with' : 'without'
      } shallow routing`
    )
  }

  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