Недавно состоялся релиз 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

Благодаря новому компоненту:

```tsx
<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:

```tsx
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 и написать своё:

```tsx
declare module "*.svg" {
	const content: React.FunctionComponent<React.SVGAttributes<SVGAElement>>;
	export default content;
}
```

Поэтому или вы живете с `any` для svg или ломаете типы внутри NextJS, что может плохо сказаться на обновлениях. Как добавить типизацию.

В tsconfig.json

```json
"include": [
		"next-env-custom.d.ts",
		"images.d.ts",
		"**/*.ts",
		"**/*.tsx"
],
```

Где `next-env-custom.d.ts` это обрезанная версия типов next:

```tsx
/// <reference types="next" />
/// <reference types="next/types/global" />
```

А в `images.d.ts` - доработанные типы с svg, описанные выше.

## Дефолтный webpack 5

Тут одни плюсы, но надо мигрировать, если у вас модифицированный конфиг, например с SVG.

Webpack 4

```tsx
module.exports = {
	webpack(config) {
		config.module.rules.push({
			test: /\.svg$/,
			issuer: {
				test: /\.(js|ts)x?$/,
			},
			use: ['@svgr/webpack'],
		});

		return config;
	},
};
```

Webpack 5

```tsx
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.

## Итог

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

Недавно состоялся релиз NextJS 11, поэтому давайте рассмотрим как положительные, так и отрицательные стороны этого релиза. Вначале скажу, что NextJS на текущий момент уже стал стандартом разработки сайтов, для которых необходим Server Side Rendering и статичная генерация страниц, опережая Gatsby.

Блог и полезные материалы

Релиз NextJS 11