Антон Ларичев
Недавно состоялся релиз NextJS 11, поэтому давайте рассмотрим как положительные, так и отрицательные стороны этого релиза. Вначале скажу, что NextJS на текущий момент уже стал стандартом разработки сайтов, для которых необходим Server Side Rendering и статичная генерация страниц, опережая Gatsby.
Несмотря на зрелость фреймворка, точки роста ещё есть, что и показал это релиз. Что добавили:
- Поддержка eslint из коробки
- Улучшение производительности
- Новый компонент Script
- Улучшение компонента Image
- Дефолтный webpack 5
- Пару дополнительных фич
Поддержка eslint
С одной стороны это никогда не было проблемой подключить и настроить под себя eslint, с другой стороны те, кто это обычно этого не делают, получают линтинг из коробки. Это хорошо, так как позволяет быстрее разворачивать новые проекты. Но в реальности, когда тебе нужен новый сайт на NextJS быстрее оказывается скопировать предыдущий проект, удалить ненужное и обновить зависимости.
Ведь когда ты разворачиваешь с нуля, тебе нужно:
- Настроить TypeScript.
- Настроить _app и метрики.
- Сделать свой _document для корректного указания языка документа.
- Удалить ненужное из стартового проекта.
- Настроить подключение svg как компонентов.
- И так далее...
Потому я надеюсь что eslint будет первым шагом к правильному стартовому шаблону, где тебя не нужно будет сразу все править руками.
Улучшение производительности
Это изменение несомненно полезное. Заявленные 40% прироста скорости в режиме dev, действительно ощущаются, особенно при работе с большими страницами. А если сравнить с NextJS 7 с которого я начал знакомство с ним - сейчас это реально удобный в работе фреймворк.
Новый компонент Script
Благодаря новому компоненту:
<Script
src="https://other.domain/my.js"
strategy="beforeInteractive"
/>
мы получим возможность управлять тем, в каком приоритете скрипты будут загружены. Это позволит вам оптимизировать время загрузки страниц, отложив на потом ненужные тяжелые скрипты. Мы можем передать один из 3х стратегий в свойство strategy:
beforeInteractive
если скрипт вам нужно загрузить и исполнить перед тем, как страница становится интерактивной. Они будут в исходном HTML, который прилетит на клиент и исполнятся до вашего JS. Использовать надо осторожно, так как они будут увеличивать скорость загрузки.afterInteractive
будет выполняться как только страница станет интерактивной. Подходит для Яндекс метрики и прочих счетчиков. Это дефолтное поведение, если стратегия не указана.lazyOnLoad
как только Next нечего будет делать после отработки всех скриптов по стратегиям выше он будет получать и исполнять скрипты с этой стратегией. Чаты, звонилки, выстреливающие в лицо окна при уходе переходят сюда.
Так же мы теперь можем подписаться на загрузку скрипта и выполнить функцию, переданную в props onLoad
.
Важно: теперь дефолтный способ загрузки скриптов defer, а не async, так что если есть у вас на сайте скрипты, которым важно оставить старое поведение, используйте Script со стратегией beforeInteractive.
Улучшение компонента Image
С одной стороны они действительно упростили работу:
- Больше не нужно задавать размеры для локальных изображений, NextJS определит их автоматически.
- Можно добавить для локальных изображений placeholder, который возводит показать легковесный blur исходного изображения, пока основная картинка не загрузилась.
- Для не локальных изображений можно указать
data:image
в качестве placeholder.
Это сразу даёт из коробки правильную работу с картинками. С другой - не сделали внятную работу с SVG, как компонентами и сломали их типизацию.
Если посмотреть на их новые типы в next-env.d.ts:
declare module '*.svg' {
/**
* Use `any` to avoid conflicts with
* `@svgr/webpack` plugin or
* `babel-plugin-inline-react-svg` plugin.
*/
const content: any
export default content
}
Всё. Все ваши svg - просто any
. Чтобы переопределить это поведение, вам нужно выкинуть из типов изображения svg и написать своё:
declare module "*.svg" {
const content: React.FunctionComponent<React.SVGAttributes<SVGAElement>>;
export default content;
}
Поэтому или вы живете с any
для svg или ломаете типы внутри NextJS, что может плохо сказаться на обновлениях. Как добавить типизацию.
В tsconfig.json
"include": [
"next-env-custom.d.ts",
"images.d.ts",
"**/*.ts",
"**/*.tsx"
],
Где next-env-custom.d.ts
это обрезанная версия типов next:
/// <reference types="next" />
/// <reference types="next/types/global" />
А в images.d.ts
- доработанные типы с svg, описанные выше.
Дефолтный webpack 5
Тут одни плюсы, но надо мигрировать, если у вас модифицированный конфиг, например с SVG.
Webpack 4
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
issuer: {
test: /\.(js|ts)x?$/,
},
use: ['@svgr/webpack'],
});
return config;
},
};
Webpack 5
module.exports = {
webpack(config, options) {
config.module.rules.push({
loader: '@svgr/webpack',
options: {
prettier: false,
svgo: true,
svgoConfig: {
plugins: [{ removeViewBox: false }],
},
titleProp: true,
},
test: /\.svg$/,
});
return config;
},
};
Пару дополнительных фич
Тут детально останавливаться не буду, так как сам не тестировал:
- Миграция Create React App на NextJS с помощью @next/codemod.
- Next.js Live - совместная работа над проектом Next, если вы используете Vecel, как вашего хостера. Понятная фича для продажи хостинга от Vercel. В дальнейшем они обещают перевести его в open source.
Итог
В целом релиз не масштабный, но глупо ожидать глобальных изменений у столь устоявшегося фреймворка. Радует что они фокусируются на производительности и допиливают уже существующие компоненты.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile
Комментарии
0