Генератор конфигураций сжатия Next.js

Создайте готовый к работе файл next.config.js или next.config.mjs с оптимизированными настройками сжатия GZIP и Brotli для вашей цели развертывания. Выберите версию Next.js, формат конфигурации и платформу развертывания — Vercel, Node.js, статический экспорт или Docker — и генератор конфигурации сжатия next.js создаст правильные настройки сжатия, конфигурацию плагина веб-пакета и заголовки. Включает предупреждения, специфичные для развертывания, и команду установки npm для необходимых пакетов. Вся генерация происходит в вашем браузере без необходимости регистрации.

Next.js Compression Config Generator

Configure the options below to generate a production-ready next.config.js (or next.config.mjs) with optimized compression settings. The next.js compression config generator supports Vercel, Node.js, static export, and Docker deployments. All generation happens in your browser - no signup required.

Next.js Version

Config File Format

ESM (.mjs) is the default for new Next.js 14+ projects. Use CJS (.js) for older projects or if you use require().

Deployment Target

Compression Options

compress: true (built-in GZIP)

Enables Next.js built-in GZIP compression for server responses. Disable if your reverse proxy handles compression.

Pre-compress to .gz (webpack plugin)

Generates .gz files at build time using compression-webpack-plugin. Requires Nginx gzip_static or CDN static file serving.

Not needed on Vercel - handled automatically

Pre-compress to .br (Brotli, webpack plugin)

Generates .br files at build time for maximum compression. Requires Nginx ngx_brotli or CDN Brotli support.

Not needed on Vercel - handled automatically

Additional Options

reactStrictMode: true

Enables React Strict Mode - recommended for catching potential issues.

poweredByHeader: false

Removes X-Powered-By: Next.js header - minor security improvement.

Image optimization enabled

Next.js built-in image optimization (next/image). Disable if using an external CDN.

productionBrowserSourceMaps

Generate source maps in production. Increases build size - only enable for debugging.

@next/bundle-analyzer

Add bundle analyzer wrapper - run ANALYZE=true npm run build to visualize bundle.

Generated next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Enable built-in GZIP compression for server responses
  compress: true,

  // Remove X-Powered-By header (minor security improvement)
  poweredByHeader: false,

  reactStrictMode: true,

};

export default nextConfig;

Vercel: Brotli and GZIP compression are handled automatically at the edge - no webpack plugin or custom headers needed. Set compress: true for the Node.js runtime fallback.

Verify compression is working

# Check GZIP on your Next.js app
curl -H "Accept-Encoding: gzip" -I https://yoursite.com/

# Check Brotli
curl -H "Accept-Encoding: br" -I https://yoursite.com/

# Build and check output sizes
npm run build
# Look for .gz / .br files in .next/static/

Зачем использовать наш генератор конфигураций сжатия Next.js?

Мгновенная настройка сжатия Next.js: мгновенно создавайте готовый к работе файл next.config.js или next.config.mjs с оптимизированными настройками сжатия — без погружения в документацию Next.js, без проб и ошибок. Наш генератор конфигураций сжатия next.js создает правильно отформатированную конфигурацию для вашей конкретной цели развертывания за считанные секунды.
Безопасный онлайн-генератор конфигураций сжатия Next.js: выбранная вами конфигурация никогда не покидает ваше устройство, когда вы используете этот генератор конфигураций сжатия next.js. Вся генерация конфигурации происходит полностью в вашем браузере — никаких запросов к серверу, никакого сохранения данных, 100% конфиденциальность. Безопасно для настройки производственных приложений Next.js.
Генератор конфигураций сжатия Next.js — без установки: создавайте конфигурации сжатия Next.js непосредственно в любом современном браузере без загрузки программного обеспечения, установки Node.js и учетной записи. Генератор конфигурации сжатия next.js работает в Windows, macOS, Linux и мобильных устройствах.
Конфигурация с учетом развертывания с предупреждениями. Генератор конфигурации сжатия next.js адаптируется к цели развертывания — Vercel, Node.js, статическому экспорту или Docker — и отображает в реальном времени предупреждения о распространенных неправильных конфигурациях, таких как двойное сжатие при использовании обратного прокси-сервера.

Распространенные случаи использования генератора конфигураций сжатия Next.js

Оптимизация развертывания Vercel: настройте сжатие Next.js для развертываний Vercel, где Brotli и GZIP автоматически обрабатываются на периферии. Генератор конфигурации сжатия next.js выдает правильные настройки — включение compress: true для резервной среды выполнения Node.js без ненужных плагинов веб-пакета.
Docker и самостоятельное развертывание: настройте сжатие Next.js для контейнеров Docker за Nginx или Caddy. Генератор конфигурации сжатия next.js предупреждает о двойном сжатии и генерирует правильное значение compress: false, когда ваш обратный прокси-сервер обрабатывает GZIP и Brotli.
Статический экспорт с доставкой CDN: создайте конфигурацию сжатия Next.js для статического экспорта (следующий экспорт), обслуживаемого из CDN. Генератор конфигурации сжатия next.js включает конфигурацию веб-пакета CompressionPlugin для предварительного сжатия файлов.js,.css и.html в.gz и.br во время сборки.
Улучшение основных веб-показателей: уменьшите размеры передачи JavaScript и CSS, чтобы улучшить показатели LCP и FID. Генератор конфигурации сжатия next.js создает конфигурацию, которая обеспечивает минификацию SWC, оптимизацию изображений и предварительное сжатие, что напрямую улучшает основные веб-показатели в PageSpeed Insights.
Настройка нового проекта Next.js. При запуске нового проекта Next.js используйте генератор конфигурации сжатия next.js, чтобы с самого начала получить готовый к работе файл next.config.mjs. Генератор включает в себя все рекомендуемые настройки для вашей цели развертывания, что экономит часы исследования документации.
Оптимизация размера пакета: добавьте оболочку @next/bundle-analyzer в ваш next.config.js, чтобы выявить большие зависимости, которые раздувают ваш пакет JavaScript. Генератор конфигурации сжатия next.js включает в себя конфигурацию анализатора пакета вместе с настройками сжатия для полной настройки оптимизации.

Что такое конфигурация сжатия Next.js?

Конфигурация сжатия Next.js управляет тем, как ваше приложение Next.js сжимает HTTP-ответы и статические ресурсы. Next.js имеет встроенную опцию сжатия, которая позволяет сжимать GZIP для ответов, отображаемых сервером, с использованием встроенного в Node.js модуля zlib. Для статических ресурсов (JavaScript, CSS, HTML) Next.js может предварительно сжимать файлы во время сборки с помощью плагина сжатия-webpack-plugin, генерируя файлы .gz и .br вместе с оригиналами. Наш генератор конфигурации сжатия next.js создает правильно отформатированный файл next.config.js или next.config.mjs, адаптированный к вашей цели развертывания — Vercel, Node.js, статический экспорт или Docker.

Как работает наш генератор конфигураций сжатия Next.js

1. Выберите параметры: выберите версию Next.js (14 или 15), формат файла конфигурации (ESM или CJS), цель развертывания и параметры сжатия. Генератор конфигурации сжатия next.js обновляет выходные данные в режиме реального времени по мере настройки каждого параметра — нажатие кнопки не требуется.
2. Просмотрите предупреждения и установите пакеты. Генератор конфигурации сжатия next.js отображает предупреждения, специфичные для развертывания, например отключение compress: true при использовании обратного прокси-сервера, и генерирует команду установки npm для всех необходимых пакетов. Вся генерация запускается в вашем браузере.
3. Скопируйте и замените файл next.config. Нажмите «Копировать», чтобы скопировать сгенерированную конфигурацию в буфер обмена. Замените существующий файл next.config.js или next.config.mjs и запустите сборку npm run, чтобы применить изменения.

Объяснение основных настроек сжатия Next.js

compress: true/false: включает или отключает встроенное GZIP-сжатие Next.js для ответов, отображаемых сервером. Установите значение true для развертываний Node.js без обратного прокси-сервера. Установите значение false, когда Nginx, Caddy или CDN обрабатывают сжатие — позволяет избежать накладных расходов на двойное сжатие.
compress-webpack-plugin: предварительно сжимает статические ресурсы (JS, CSS, HTML, SVG, JSON) в файлы.gz и.br во время сборки. Затем сервер напрямую обслуживает предварительно сжатый файл, устраняя нагрузку на процессор при сжатии во время выполнения. Требуется поддержка на стороне сервера (обслуживание статических файлов Nginx gzip_static, brotli_static или CDN).
swcMinify: true: использует компилятор SWC для минификации JavaScript вместо Terser — в 17 раз быстрее при эквивалентном размере вывода. Значение по умолчанию в Next.js 13+ и единственный вариант в Next.js 15.
@next/bundle-analyzer: оборачивает конфигурацию Next.js для добавления визуализации пакета. Запустите ANALYZE=true npm run build, чтобы открыть интерактивную древовидную карту вашего пакета JavaScript — выявляет большие зависимости, которые увеличивают размер передачи.

Стратегия сжатия по цели развертывания

Vercel: Brotli и GZIP обрабатываются автоматически на границе — установите compress: true для резервной среды выполнения Node.js и пропустите плагин веб-пакета. Сервер Node.js: включите сжатие: true для динамических ответов и используйте плагин веб-пакета для статических ресурсов. Докер за Nginx: отключите compress: false и настройте Nginx GZIP/Brotli — позволяет избежать двойного сжатия. Статический экспорт: используйте плагин веб-пакета для предварительного сжатия всех статических файлов и настройте CDN или Nginx для обслуживания предварительно сжатых вариантов. Используйте генератор конфигурации сжатия next.js, чтобы получить правильную конфигурацию для вашего конкретного развертывания.

Часто задаваемые вопросы

Генератор конфигурации сжатия next.js создает готовый к вставке файл next.config.js или next.config.mjs с оптимизированными настройками сжатия для вашей цели развертывания. Наш бесплатный онлайн-генератор конфигураций сжатия next.js поддерживает развертывания Vercel, Node.js, статический экспорт и Docker — с предупреждениями в режиме реального времени о распространенных неправильных конфигурациях.

Установите compress: true, если ваш сервер Next.js обрабатывает ответы напрямую. Установите compress: false, если Nginx, Caddy или CDN обрабатывают сжатие перед Next.js — это позволяет избежать накладных расходов на двойное сжатие.

Да. Vercel автоматически применяет сжатие Brotli и GZIP на границе для всех ответов. Вам не нужен плагин compress-webpack-plugin или специальные заголовки в Vercel.

Да. Вся генерация конфигурации полностью выполняется в вашем браузере с использованием JavaScript. Никакие данные конфигурации не отправляются на какой-либо сервер, не сохраняются удаленно и не передаются по сети.

Да – 100% бесплатно, навсегда. Без регистрации, без учетной записи, без премиум-уровня и без рекламы. Создавайте неограниченное количество конфигураций сжатия Next.js совершенно бесплатно.

next.config.mjs использует синтаксис модуля ES (импорт/экспорт) и используется по умолчанию для новых проектов Next.js 14+. next.config.js использует синтаксис CommonJS (require/module.exports) для старых проектов. Выбирайте в зависимости от модульной системы вашего проекта.

Установите compress-webpack-plugin и добавьте его в конфигурацию вашего веб-пакета с алгоритмом: «brotliCompress». При этом будут созданы файлы .br вместе с файлами .js и .css. Настройте свой сервер для обслуживания предварительно сжатых файлов: Nginx требует включения brotli_static, Caddy использует file_server с предварительно сжатым br gzip.

swcMinify: true использует компилятор SWC на основе Rust для минификации JavaScript — примерно в 17 раз быстрее, чем Terser с эквивалентным размером вывода. Это значение по умолчанию в Next.js 13+ и единственный вариант в Next.js 15.

Проверьте с помощью curl: "curl -H "Accept-Encoding: gzip" -I https://yoursite.com/" и найдите Content-Encoding: gzip в заголовках ответов. В DevTools браузера перейдите на вкладку «Сеть» → выберите файл JS или CSS → «Заголовки ответов» → «Кодирование контента».