Next.js 12.3 | Next.js Русский

Мы выпустили ряд улучшений качества жизни в Next.js 12.3:

Улучшенный Fast Refresh: файлы .env, jsconfig.json и tsconfig.json теперь поддерживают горячую перезагрузку.
Автоматическая установка TypeScript: добавьте файл .ts для автоматической настройки TypeScript и установки зависимостей.
Компонент Image: next/future/image теперь стабилен.
Минификатор SWC: минификация с помощью компилятора Next.js теперь стабильна.
Обновление нового роутера и макетов: начата реализация и объяснены новые функции.

Обновитесь сегодня, выполнив npm i next@latest.

Анонсируем третью глобальную конференцию сообщества Next.js 25 октября. Регистрируйтесь сейчас →

Next.js Conf

Вы приглашены на глобальную конференцию сообщества Next.js 25 октября. В честь 6-летия Next.js мы представим:

Функции, использующие React Server Components, Streaming и Suspense.
Конвенции, упрощающие разработчикам оптимизацию и масштабирование приложений.
Инструменты с открытым исходным кодом, ускоряющие локальную разработку и сборку для продакшена.

Получите бесплатный билет и узнайте о будущем Next.js и React, а также следите за @nextjs для новых анонсов. Мы также ищем доклады от сообщества. Подайте заявку на выступление и расскажите о том, что вы создаёте с Next.js.

Автоматическая установка TypeScript

Next.js имеет встроенную поддержку автоматической настройки TypeScript. Ранее добавление TypeScript в существующий проект требовало ручной установки необходимых зависимостей.

В этом релизе Next.js автоматически обнаруживает добавление TypeScript-файлов в проект, устанавливает необходимые зависимости и добавляет файл tsconfig.json. Это работает при запуске next dev и next build.

Видео, демонстрирующее автоматическую установку TypeScript в Next.js.

Улучшенный Fast Refresh

Быстрые итерации критически важны для локального рабочего процесса разработки. Next.js использует Fast Refresh для мгновенного отражения изменений в React-компонентах. Сохраните файл и увидите изменения в браузере без необходимости перезагружать страницу.

В Next.js 12.3 некоторые конфигурационные файлы теперь также поддерживают горячую перезагрузку при изменениях, включая:

.env и его варианты env.*
jsconfig.json
tsconfig.json

Теперь вам не нужно перезапускать локальный сервер разработки при изменении этих конфигурационных файлов.

Видео, демонстрирующее горячую перезагрузку файла .env в Next.js.

Компонент Image

Компонент `next/future/image` (Стабильный)

В Next.js 12.2 мы представили экспериментальную версию нового компонента Image, который упрощает стилизацию изображений и улучшает производительность за счёт использования нативной ленивой загрузки в браузере.

Новый компонент Image теперь стабилен и больше не требует экспериментального флага.

С момента прошлого релиза мы внесли дополнительные улучшения:

Добавлена поддержка режима макета fill, при котором изображение заполняет родительский элемент.
Улучшен placeholder с размытием: теперь работает с прозрачными изображениями, не требует <noscript>, а next dev соответствует next start.
Устранён незначительный сдвиг макета (в браузерах, кроме Chrome) путём скрытия текста alt во время загрузки изображения.
Свойство alt теперь обязательно для лучшей доступности.
Исправлено свойство onError при возникновении ошибки до гидратации.
Исправлено соотношение сторон для статически импортированных изображений с указанием только width или только height.
Улучшены сообщения об ошибках при использовании неправильных настроек или конфигурации.

В будущем мы планируем переименовать next/image в next/legacy/image, а next/future/image — в next/image. Это обеспечит отличный опыт для новых проектов Next.js, а существующие проекты смогут легко мигрировать с помощью нашего кодмода next/image. Мы предоставим больше деталей перед следующим мажорным релизом.

Для получения дополнительной информации о текущем использовании обратитесь к документации, которая включает руководство по миграции.

Удалённые шаблоны (Стабильные)

remotePatterns позволяет указывать шаблоны для удалённых изображений при использовании встроенного API оптимизации изображений. Это обеспечивает более гибкое сопоставление по сравнению с существующей конфигурацией images.domains, которая выполняет только точное совпадение по имени домена.

Эта опция теперь стабильна и может использоваться со следующей конфигурацией:

next.config.js

module.exports = {
  images: {
    remotePatterns: [
      {
        // Имя хоста в свойстве `src` должно заканчиваться на `.example.com`,
        // иначе API вернёт 400 Bad Request.
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
};

Отключение оптимизации изображений (Стабильно)

API оптимизации изображений требует сервер для оптимизации изображений по запросу. Это отлично работает при самостоятельном хостинге с next start или развертывании на платформах вроде Vercel. Однако это не будет работать с next export, так как он не включает сервер для оптимизации изображений. Ранее требовалось настраивать сторонний провайдер оптимизации изображений через свойство loader, но теперь можно полностью отключить оптимизацию изображений через next.config.js для всех экземпляров next/image.

Эта ранее экспериментальная опция теперь стабильна и может использоваться со следующей конфигурацией:

next.config.js

module.exports = {
  images: {
    unoptimized: true,
  },
};

Минификатор SWC (Стабильный)

В Next.js 12 мы представили минификацию кода с помощью SWC как часть экспериментальных функций Next.js Compiler. Первые результаты показали, что минификация с SWC работает в 7 раз быстрее, чем предыдущая версия с Terser.

В этом релизе функция стала стабильной, и вы можете включить её с помощью следующей опции в next.config.js:

next.config.js

module.exports = {
  swcMinify: true,
};

Мы планируем сделать минификатор SWC стандартным в следующем мажорном релизе.

Обновление нового роутера и макетов

Ранее в этом году мы опубликовали RFC по макетам, представляющий самое значительное обновление Next.js с момента его выпуска в 2016 году. Эти изменения включают новый роутер, построенный на основе React Server Components. Работа над реализацией началась, и мы движемся к публичной бета-версии в следующем мажорном релизе.

Сегодня мы рассказываем больше о предстоящих функциях, включая:

Группы маршрутов: используются для исключения маршрутов из макетов и организации маршрутов без влияния на URL-пути.
Мгновенные состояния загрузки: новая конвенция файлов для простого добавления UI загрузки, построенного на Suspense.
Обработка ошибок: новая конвенция файлов для простого добавления вложенных Error Boundaries и UI ошибок.
Шаблоны: новая конвенция файлов для добавления общего UI, который создаёт отдельный экземпляр и не разделяет состояние.
Перехватывающие маршруты, параллельные маршруты и условные маршруты: новые конвенции, позволяющие реализовать продвинутые паттерны маршрутизации.

Кроме того, в отдельном RFC мы исследуем добавление поддержки глобального импорта CSS в новой директории app. Это позволит использовать пакеты, импортирующие свои собственные файлы .css, без дополнительной конфигурации.

Подробнее об этих новых функциях читайте в RFC по макетам.

Другие улучшения

Новая документация о встроенных функциях доступности в Next.js.
Шаблоны create-next-app теперь автоматически включают поддержку тёмного режима в соответствии с системными настройками.
src/ теперь является директорией по умолчанию для линтинга при использовании встроенной поддержки ESLint.
next.config.js теперь включает валидацию схемы с ajv, помогая предотвратить неправильное использование конфигурационных опций.
next.config.js теперь имеет экспериментальный флаг fallbackNodePolyfills: false для предотвращения полифиллинга Node.js API в браузере (что приводит к увеличению размера бандла). Эта опция вызовет ошибку во время сборки, показывающую, откуда берётся ненужный импорт.

Сообщество

Next.js — результат совместной работы более 2000 разработчиков, отраслевых партнёров, таких как Google Chrome и Meta, и нашей основной команды в Vercel.

Этот релиз стал возможен благодаря вкладу: @pthomas931, @madmed88, @sanjaiyan-dev, @balazsorban44, @DonghyukJacobJang, @chaiwattsw, @styfle, @dunglas, @ahkhanjani, @promer94, @terrierscript, @shawncal, @insik-han, @QuiiBz, @ykzts, @JoshuaKGoldberg, @lucasassisrosa, @dikwickley, @Brooooooklyn, @sicarius97, @FourwingsY, @manovotny, @SukkaW, @pepoeverton, @jdeniau, @sumiren, @anthonyshew, @pekarja5, @huozhi, @leerob, @fediev, @atcastle, @shuding, @feugy, @jonohewitt, @zakiego, @Schniz, @timneutkens, @wyattjoh, @MaedahBatool, @X7Becka, @nnnnoel, @dcdev67, @alvinometric, @timothympace, @jeferson-sb, @ijjk, @theMosaad, @Yuddomack, @msquitieri, @andreizanik, @nix6839, @thomasballinger, @ziishaned, @xyeres, @nyedidikeke, @maxproske, @sokra, @titusdmoore, @thebergamo, @fikrikarim, @Kikobeats, @clearlyTHUYDOAN, @nasso, @qutek, @kdy1, @kyliau, @housseindjirdeh, @barissayil, @seveibar, @Jessidhia, @santidalmasso, @JohnDaly, @Nikhilnama18, @mduleone, @colinhacks, @ductnn, @josh, @hiro0218, @eltociear, @kwonoj, @valcosmos, @mihaic195, @stefanprobst, @KATT, @thiagomorales, @danielcavanagh, @steven-tey, @hellomhc, @trevor-fauna, @nguyenyou, @eminvergil, @lobsterkatie, @dorian-davis, @sambecker, @isaac-martin, @lfades, @amorimr, @javivelasco, @mongolyy, @Thisen, @zorrolisto, @ethomson, @padmaia, @thisisjofrank, @dominiksipowicz, @awareness481, @pakaponk, @apledger, @longzheng, @tknickman, @rbrcsk, @emersonlaurentino, @carstenlebek, @edusig, @riccardogiorato, @hanneslund, @ryanhaticus, @j-mendez, @armandabric, @WinmezzZ, @andershagbard, @dammy001, @MarDi66, @okmttdhr, @rishabhpoddar, @marjorg, @dustinsgoodman и @zanechua.