Обзор обновления NextJS 11
Давайте обсудим, что нас ждет в новой 11-ой версии Next.js
В начале лета вышла новая версия популярного react-фреймворка Next.js. Этот фреймворк все шире используется с каждым годом, и разработчики приготовили нам немало интересных новинок в последней версии. Вкратце рассмотрим самые интересные из них.
Наработки от команды Google
В 11-ю версию фреймворка были добавлены новые правила eslint, над которыми потрудились разработчики из Google. Благодаря этим правилам станет невозможным использование паттернов кодинга, ведущих к снижению производительности приложения. Также команда Google внесла несколько других оптимизаций, в результате чего приложения будут работать еще быстрее.
Новая реализация загрузчика Babel
Babel - "сердце" фреймворка. Именно эта программа выполняет львиную часть работы при сборке приложения, транспилируя код, понятный разработчикам, в код, понятный браузерам. Соответственно, скорость его работы очень влияет на комфорт разработчика. Новая реализация позволит уменьшить время пересборки приложения.
Новый компонент Script
Данное нововведение позволит разработчикам устанавливать приоритет загрузки сторонних скриптов, чтобы повысить скорость загрузки страницы. У компонента Script есть три режима: beforeInteractive (для критических скриптов, которые нужно выполнить до того, как страница станет интерактивной), afterInteractive (эти скрипты будут загружаться и исполняться после того, как страница станет интерактивной), lazyOnLoad (тут можно разместить скрипты, которые будут ждать подгрузки по мере надобности).
Автоматическое определение размера загружаемых изображений
Пожалуй, это одно из самых интересных и, главное, заметных невооруженным глазом изменений. Изображения теперь можно импортировать в компонент, и Next сам определит их размер. А это значит, что страница при загрузке не будет дергаться, ведь размеры изображений известны заранее. Еще одна полезная вещь: плейсхолдер для картинок. Теперь для каждой из картинок можно задать опцию размытого отображения, пока она полностью не прогрузится.
Миграция с create-react-app на next
Данное нововведение является экспериментальным. Разработчики предлагают возможность превратить ваше приложение, созданное с помощью create-react-app, в next-приложение с помощью одной команды в консоли. Весьма удобный способ превратить CSR-приложение в SSR.
Next.js Live
В 11-ой версии появился новый продвинутый режим совместной разработки. Теперь среду для совместной работы можно создать прямо в браузере. Достаточно поделиться URL-адресом, и каждый участник команды сможет видеть все вносимые в проект изменения.
В целом, любой js-фреймворк обычно развивается прежде всего в области ускорения работы и оптимизации готового кода. Не стала исключением и 11-ая версия Next.js. Тем не менее, она не обошла вниманием и самих разработчиков. В этой версии было сделано многое для повышения комфорта их работы. Фреймворк взял на себя больше рутинных действий, освобождая разработчикам руки и головы для более творческих задач.