Конфигурация через next.config.js
## Роль `next.config.js` при использовании SWC
В проектах на Next.js компилятор SWC используется по умолчанию для трансиляции JavaScript и TypeScript, обработки JSX, оптимизации производительности сборки, минификации и выполнения ряда преобразований, которые ранее выполнялись Babel. Основная точка настройки поведения SWC в экосистеме Next.js — файл `next.config.js`.
Через данный файл можно управлять трансформациями кода, включать экспериментальные возможности, настраивать минификацию, работу с пакетами, поддержку отдельных языковых возможностей и интеграцию с внешними библиотеками.
Стандартная структура конфигурации выглядит следующим образом:
```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
}
module.exports = nextConfig
```
Все параметры, связанные с использованием SWC, добавляются внутрь объекта конфигурации.
---
## Включение SWC Minify
Одной из наиболее популярных возможностей SWC является высокопроизводительная минификация JavaScript-кода.
Ранее Next.js использовал Terser, однако SWC позволяет выполнять аналогичную работу значительно быстрее благодаря реализации на Rust.
Конфигурация:
```javascript
const nextConfig = {
swcMinify: true
}
module.exports = nextConfig
```
После включения:
* уменьшается размер итоговых бандлов;
* ускоряется процесс production-сборки;
* сокращается время CI/CD-пайплайнов;
* уменьшается нагрузка на процессор во время компиляции.
При выполнении команды:
```bash
next build
```
минификация будет выполняться средствами SWC.
---
## Настройка React Strict Mode
Хотя данный параметр напрямую не относится к трансформациям SWC, он влияет на итоговый процесс компиляции React-приложения.
```javascript
const nextConfig = {
reactStrictMode: true
}
module.exports = nextConfig
```
В режиме разработки React выполняет дополнительные проверки компонентов.
Поскольку SWC участвует в обработке JSX и React-кода, данная настройка часто используется совместно с его конфигурацией.
---
## Использование Compiler API
Next.js предоставляет секцию `compiler`, через которую осуществляется управление отдельными возможностями SWC.
Структура:
```javascript
const nextConfig = {
compiler: {
}
}
module.exports = nextConfig
```
Именно этот раздел является основным местом конфигурирования компилятора.
---
## Удаление `console` в production
SWC способен автоматически удалять вызовы консольных методов во время сборки.
Конфигурация:
```javascript
const nextConfig = {
compiler: {
removeConsole: true
}
}
module.exports = nextConfig
```
Пример исходного кода:
```javascript
console.log('Debug')
console.info('Information')
export default function Home() {
return
Hello
}
```
После production-сборки:
```javascript
export default function Home() {
return React.createElement("div", null, "Hello")
}
```
Все инструкции логирования будут удалены.
---
### Исключение отдельных методов
Иногда требуется сохранить некоторые виды логирования.
```javascript
const nextConfig = {
compiler: {
removeConsole: {
exclude: ['error']
}
}
}
```
Тогда:
```javascript
console.log('Message')
console.error('Error')
```
превратится в:
```javascript
console.error('Error')
```
Метод `error` останется в коде.
---
## Поддержка Styled Components
SWC содержит встроенный трансформер для библиотеки Styled Components.
Ранее для этого использовался Babel-плагин:
```json
{
"plugins": ["styled-components"]
}
```
Теперь достаточно указать:
```javascript
const nextConfig = {
compiler: {
styledComponents: true
}
}
module.exports = nextConfig
```
После активации становятся доступны:
* корректные displayName;
* серверный рендеринг;
* оптимизация классов;
* улучшенная отладка.
---
### Расширенная конфигурация Styled Components
```javascript
const nextConfig = {
compiler: {
styledComponents: {
displayName: true,
ssr: true,
fileName: true,
minify: true,
transpileTemplateLiterals: true,
pure: true
}
}
}
```
Описание параметров:
| Параметр | Назначение |
| ------------------------- | ------------------------------------------------ |
| displayName | отображение имен компонентов |
| ssr | поддержка серверного рендера |
| fileName | добавление имени файла |
| minify | минификация CSS |
| transpileTemplateLiterals | оптимизация шаблонных строк |
| pure | генерация специальных аннотаций для tree-shaking |
---
## Поддержка Emotion
SWC содержит встроенную поддержку Emotion.
Включение:
```javascript
const nextConfig = {
compiler: {
emotion: true
}
}
module.exports = nextConfig
```
Либо расширенный вариант:
```javascript
const nextConfig = {
compiler: {
emotion: {
sourceMap: true,
autoLabel: 'always',
labelFormat: '[local]'
}
}
}
}
```
Параметры позволяют управлять:
* генерацией source maps;
* автоматическим именованием классов;
* форматом меток компонентов.
---
## Оптимизация импорта библиотек
Одной из мощных возможностей SWC является автоматическая трансформация импортов.
Рассмотрим библиотеку:
```javascript
import { Button } from 'ui-library'
```
Без оптимизации может подключаться весь пакет.
Использование `modularizeImports`:
```javascript
const nextConfig = {
modularizeImports: {
'ui-library': {
transform: 'ui-library/dist/{{member}}'
}
}
}
```
SWC автоматически преобразует:
```javascript
import { Button } from 'ui-library'
```
в:
```javascript
import Button from 'ui-library/dist/Button'
```
Это существенно уменьшает размер итогового бандла.
---
## Использование `optimizePackageImports`
В современных версиях Next.js появился механизм автоматической оптимизации популярных библиотек.
Конфигурация:
```javascript
const nextConfig = {
experimental: {
optimizePackageImports: [
'lodash-es',
'date-fns',
'ramda'
]
}
}
```
SWC выполняет преобразование импортов автоматически.
Преимущества:
* снижение размера bundle;
* уменьшение количества модулей;
* ускорение запуска приложения.
---
## Транспиляция внешних пакетов
Некоторые npm-пакеты публикуются в современном синтаксисе JavaScript и требуют дополнительной обработки.
Для этого используется:
```javascript
const nextConfig = {
transpilePackages: [
'shared-ui',
'common-utils'
]
}
```
Теперь SWC будет компилировать данные пакеты так же, как локальный исходный код проекта.
Особенно полезно при использовании:
* monorepo;
* Turborepo;
* внутренних корпоративных библиотек;
* workspace-пакетов.
---
## Поддержка Relay
SWC содержит встроенную интеграцию с Relay.
Настройка:
```javascript
const nextConfig = {
compiler: {
relay: {
src: './src'
}
}
}
```
Возможности:
* анализ GraphQL-запросов;
* оптимизация Relay-компонентов;
* генерация необходимого промежуточного кода.
---
## Настройка React Properties
Для улучшения отладки React-приложений можно сохранять дополнительные метаданные.
```javascript
const nextConfig = {
compiler: {
reactRemoveProperties: true
}
}
```
SWC удаляет специальные свойства вида:
```html
```
После сборки:
```html
```
---
### Удаление только определённых свойств
```javascript
const nextConfig = {
compiler: {
reactRemoveProperties: {
properties: [
'^data-testid$',
'^data-test$'
]
}
}
}
}
```
Используются регулярные выражения.
---
## Удаление PropTypes
В крупных React-проектах часто применяется библиотека PropTypes.
Во время production-сборки её можно исключать из итогового бандла.
```javascript
const nextConfig = {
compiler: {
removeReactProperties: true
}
}
```
Либо использовать специализированные плагины экосистемы для более агрессивного удаления проверок.
Такой подход позволяет сократить объём клиентского JavaScript.
---
## Экспериментальные возможности SWC
Многие новые функции Next.js сначала появляются внутри раздела `experimental`.
Пример:
```javascript
const nextConfig = {
experimental: {
}
}
```
Содержимое этого раздела зависит от версии Next.js.
Наиболее часто здесь располагаются:
* новые трансформации SWC;
* экспериментальные оптимизации;
* механизмы tree-shaking;
* улучшения Server Components;
* новые алгоритмы компиляции.
Перед использованием рекомендуется проверять совместимость с конкретной версией Next.js.
---
## Настройка внешних пакетов для Server Components
SWC участвует в анализе зависимостей серверных компонентов.
Пример:
```javascript
const nextConfig = {
experimental: {
serverComponentsExternalPackages: [
'sharp',
'bcrypt'
]
}
}
```
Это позволяет корректно работать с пакетами, использующими возможности Node.js.
---
## Комбинирование нескольких настроек
Реальная конфигурация обычно объединяет несколько возможностей SWC одновременно.
Пример:
```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
transpilePackages: [
'@company/ui',
'@company/shared'
],
compiler: {
removeConsole: {
exclude: ['error']
},
styledComponents: {
displayName: true,
ssr: true,
minify: true
},
reactRemoveProperties: {
properties: ['^data-testid$']
}
},
experimental: {
optimizePackageImports: [
'lodash-es',
'date-fns'
]
}
}
module.exports = nextConfig
```
Такая конфигурация одновременно обеспечивает:
* быстрые сборки благодаря SWC;
* минификацию кода;
* оптимизацию импортов;
* уменьшение размера бандлов;
* поддержку Styled Components;
* удаление отладочных конструкций;
* транспиляцию внешних пакетов;
* улучшение производительности production-версии приложения.
## Порядок применения трансформаций
Во время сборки Next.js использует SWC как центральный компилятор. Упрощённая последовательность обработки выглядит следующим образом:
1. Чтение исходного кода.
2. Разбор в AST (Abstract Syntax Tree).
3. Выполнение трансформаций SWC.
4. Применение настроек из секции `compiler`.
5. Оптимизация импортов.
6. Транспиляция JSX и TypeScript.
7. Минификация.
8. Генерация итоговых бандлов.
Схематично процесс можно представить так:
```text
Source Code
↓
AST Parsing
↓
SWC Transform
↓
Compiler Options
↓
Bundle Optimization
↓
Minification
↓
Production Output
```
Благодаря тому, что все перечисленные операции выполняются внутри высокопроизводительного компилятора на Rust, Next.js получает значительное ускорение сборки по сравнению с классической цепочкой Babel + Terser.