Версия 13

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

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

npm i next@latest react@latest react-dom@latest eslint-config-next@latest
# или
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
# или
pnpm up next react react-dom eslint-config-next --latest
# или
bun add next@latest react@latest react-dom@latest eslint-config-next@latest

Краткое описание версии 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>О нас</a>
</Link>

// Next.js 13: `<Link>` всегда рендерит `<a>` под капотом
<Link href="/about">
  О нас
</Link>

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

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

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

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

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

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