Версия 13

Обновление с версии 12 до 13

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

npm i next@13 react@latest react-dom@latest eslint-config-next@13

yarn add next@13 react@latest react-dom@latest eslint-config-next@13

pnpm i next@13 react@latest react-dom@latest eslint-config-next@13

bun add next@13 react@latest react-dom@latest eslint-config-next@13

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

Краткое описание версии 13

• Поддерживаемые браузеры были изменены: удалена поддержка Internet Explorer и добавлена поддержка современных браузеров.
• Минимальная версия Node.js была увеличена с 12.22.0 до 16.14.0, так как версии 12.x и 14.x достигли конца жизненного цикла.
• Минимальная версия React была увеличена с 17.0.2 до 18.2.0.
• Свойство конфигурации swcMinify было изменено с false на true. Подробнее см. в разделе Компилятор Next.js.
• Импорт next/image был переименован в next/legacy/image. Импорт next/future/image был переименован в next/image. Доступен кодмод для безопасного и автоматического переименования импортов.
• Дочерний элемент next/link больше не может быть <a>. Добавьте свойство legacyBehavior для использования старого поведения или удалите <a> для обновления. Доступен кодмод для автоматического обновления кода.
• Свойство конфигурации target было удалено и заменено на Трассировку выходных файлов.

Миграция общих функций

Next.js 13 представляет новую директорию app с новыми функциями и соглашениями. Однако обновление до Next.js 13 не требует использования новой директории app.

Вы можете продолжать использовать pages с новыми функциями, которые работают в обеих директориях, такими как обновленный компонент Image, компонент Link, компонент Script и оптимизация шрифтов.

Компонент <Image/>

Next.js 12 представил множество улучшений для компонента Image с временным импортом: next/future/image. Эти улучшения включали меньше клиентского JavaScript, более простые способы расширения и стилизации изображений, лучшую доступность и нативную ленивую загрузку в браузере.

Начиная с Next.js 13, это новое поведение стало стандартным для next/image.

Доступны два кодмода для помощи в миграции на новый компонент Image:

• next-image-to-legacy-image: Этот кодмод безопасно и автоматически переименует импорты next/image в next/legacy/image, чтобы сохранить поведение, как в Next.js 12. Рекомендуем запустить этот кодмод для быстрого автоматического обновления до Next.js 13.
• next-image-experimental: После выполнения предыдущего кодмода вы можете дополнительно запустить этот экспериментальный кодмод для обновления next/legacy/image до нового next/image, который удалит неиспользуемые свойства и добавит встроенные стили. Обратите внимание, что этот кодмод экспериментальный и покрывает только статическое использование (например, <Image src={img} layout="responsive" />), но не динамическое (например, <Image {...props} />).

Альтернативно, вы можете обновить вручную, следуя руководству по миграции, а также см. сравнение с legacy-версией.

Компонент <Link>

Компонент <Link> больше не требует ручного добавления тега <a> в качестве дочернего элемента. Это поведение было добавлено как экспериментальная опция в версии 12.2 и теперь стало стандартным. В Next.js 13 <Link> всегда рендерит <a> и позволяет передавать свойства вложенному тегу.

Например:

import Link from 'next/link'

// Next.js 12: `<a>` должен быть вложенным, иначе он исключается
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` всегда рендерит `<a>` внутри
<Link href="/about">
  About
</Link>

Для обновления ссылок до Next.js 13 вы можете использовать кодмод new-link.

Компонент <Script>

Поведение next/script было обновлено для поддержки как pages, так и app. Если вы постепенно внедряете app, прочитайте руководство по обновлению.

Оптимизация шрифтов

Ранее Next.js помогал оптимизировать шрифты, встраивая CSS шрифтов. Версия 13 представляет новый модуль next/font, который дает возможность настраивать процесс загрузки шрифтов, сохраняя при этом отличную производительность и конфиденциальность.

См. Оптимизация шрифтов, чтобы узнать, как использовать next/font.