Как обновиться до версии 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 Compiler.
• Импорт next/image переименован в next/legacy/image. Импорт next/future/image переименован в next/image. Доступен кодмод для безопасного и автоматического переименования импортов.
• Дочерний элемент next/link больше не может быть тегом <a>. Добавьте свойство legacyBehavior для использования старого поведения или удалите <a> для обновления. Доступен кодмод для автоматического обновления вашего кода.
• Свойство конфигурации target удалено и заменено на Output File Tracing.

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

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

Вы можете продолжать использовать 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.