Saltar al contenido
Aback Tools Logo

Generador de configuración de compresión Next.js

Genere un next.config.js o next.config.mjs listo para producción con configuraciones de compresión GZIP y Brotli optimizadas para su objetivo de implementación. Seleccione su versión de Next.js, formato de configuración y plataforma de implementación (Vercel, Node.js, exportación estática o Docker) y el generador de configuración de compresión de next.js producirá la configuración de compresión, la configuración del complemento del paquete web y los encabezados correctos. Incluye advertencias específicas de la implementación y el comando npm install para los paquetes requeridos. Toda la generación ocurre en su navegador sin necesidad de registrarse.

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.

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

Compression Options

Additional Options

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/

¿Por qué utilizar nuestro generador de configuración de compresión Next.js?

  • Configuración instantánea de compresión de Next.js: genere instantáneamente un next.config.js o next.config.mjs listo para producción con configuraciones de compresión optimizadas, sin necesidad de profundizar en la documentación de Next.js ni de prueba y error. Nuestro generador de configuración de compresión next.js produce una configuración con el formato correcto para su objetivo de implementación específico en segundos.
  • Generador de configuración de compresión Secure Next.js en línea: sus opciones de configuración nunca abandonan su dispositivo cuando utiliza este generador de configuración de compresión next.js. Toda la generación de configuración se ejecuta completamente en su navegador: sin solicitudes de servidor, sin retención de datos, 100% privado. Seguro para configurar aplicaciones Next.js de producción.
  • Generador de configuración de compresión Next.js: sin instalación: genere configuraciones de compresión Next.js directamente en cualquier navegador moderno sin descargas de software, sin instalación de Node.js y sin necesidad de cuenta. El generador de configuración de compresión next.js funciona en Windows, macOS, Linux y dispositivos móviles.
  • Configuración compatible con la implementación con advertencias: el generador de configuración de compresión next.js se adapta a su objetivo de implementación (Vercel, Node.js, exportación estática o Docker) y muestra advertencias en tiempo real para configuraciones erróneas comunes, como la doble compresión cuando se está detrás de un proxy inverso.

Casos de uso comunes para el generador de configuración de compresión Next.js

  • Optimización de la implementación de Vercel: configure la compresión Next.js para implementaciones de Vercel donde Brotli y GZIP se manejan automáticamente en el borde. El generador de configuración de compresión next.js produce la configuración correcta, habilitando compress: true para el respaldo del tiempo de ejecución de Node.js sin complementos de paquete web innecesarios.
  • Implementaciones Docker y autohospedadas: configure la compresión Next.js para contenedores Docker detrás de Nginx o Caddy. El generador de configuración de compresión next.js advierte contra la doble compresión y genera la compresión correcta: configuración falsa cuando su proxy inverso maneja GZIP y Brotli.
  • Exportación estática con entrega CDN: genere la configuración de compresión Next.js para exportaciones estáticas (próxima exportación) servidas desde una CDN. El generador de configuración de compresión next.js incluye la configuración del paquete web CompressionPlugin para precomprimir archivos.js,.css y.html en.gz y.br en el momento de la compilación.
  • Mejora de Core Web Vitals: reduzca los tamaños de transferencia de JavaScript y CSS para mejorar las puntuaciones de LCP y FID. El generador de configuración de compresión next.js produce una configuración que permite la minificación de SWC, la optimización de imágenes y la precompresión, mejorando directamente Core Web Vitals en PageSpeed ​​Insights.
  • Nueva configuración del proyecto Next.js: al iniciar un nuevo proyecto Next.js, utilice el generador de configuración de compresión next.js para obtener un next.config.mjs listo para producción desde el principio. El generador incluye todas las configuraciones recomendadas para su objetivo de implementación, lo que le ahorra horas de investigación de documentación.
  • Optimización del tamaño del paquete: agregue el contenedor @next/bundle-analyzer a su next.config.js para identificar grandes dependencias que inflan su paquete de JavaScript. El generador de configuración de compresión next.js incluye la configuración del analizador de paquetes junto con la configuración de compresión para una configuración de optimización completa.

¿Qué es la configuración de compresión de Next.js?

La configuración de compresión de Next.js controla cómo su aplicación Next.js comprime las respuestas HTTP y los activos estáticos. Next.js tiene una opción de compresión incorporada que permite la compresión GZIP para respuestas renderizadas por el servidor utilizando el módulo zlib incorporado de Node.js. Para activos estáticos (JavaScript, CSS, HTML), Next.js puede precomprimir archivos en el momento de la compilación utilizando el complemento de paquete web de compresión, generando archivos.gz y.br junto con los originales. Nuestro generador de configuración de compresión next.js produce un next.config.js o next.config.mjs con el formato correcto adaptado a su objetivo de implementación: Vercel, Node.js, exportación estática o Docker.

Cómo funciona nuestro generador de configuración de compresión Next.js

  1. 1 Seleccione sus opciones: elija su versión de Next.js (14 o 15), el formato del archivo de configuración (ESM o CJS), el destino de implementación y las opciones de compresión. El generador de configuración de compresión next.js actualiza la salida en tiempo real a medida que ajusta cada opción, sin necesidad de presionar ningún botón.
  2. 2 Revise las advertencias e instale los paquetes: el generador de configuración de compresión next.js muestra advertencias específicas de la implementación, como deshabilitar compress: true cuando está detrás de un proxy inverso, y genera el comando npm install para los paquetes necesarios. Toda la generación se ejecuta en su navegador.
  3. 3 Copie y reemplace su archivo next.config: haga clic en Copiar para copiar la configuración generada a su portapapeles. Reemplace su next.config.js o next.config.mjs existente y ejecute npm run build para aplicar los cambios.

Explicación de las configuraciones clave de compresión de Next.js

  • comprimir: verdadero/falso: habilita o deshabilita la compresión GZIP incorporada de Next.js para respuestas renderizadas por el servidor. Establezca este valor en verdadero para implementaciones de Node.js sin un proxy inverso. Se establece en falso cuando Nginx, Caddy o una CDN manejan la compresión; evita la sobrecarga de doble compresión.
  • compresión-webpack-plugin: precomprime activos estáticos (JS, CSS, HTML, SVG, JSON) en archivos.gz y.br en el momento de la compilación. Luego, el servidor entrega el archivo precomprimido directamente, lo que elimina la sobrecarga de la CPU durante la compresión en tiempo de ejecución. Requiere soporte del lado del servidor (servicio de archivos estáticos Nginx gzip_static, brotli_static o CDN).
  • swcMinify: true: utiliza el compilador SWC para la minificación de JavaScript en lugar de Terser: 17 veces más rápido con un tamaño de salida equivalente. Predeterminado en Next.js 13+ y la única opción en Next.js 15.
  • @next/bundle-analyzer: ajusta la configuración de Next.js para agregar visualización del paquete. Ejecute ANALYZE=true npm run build para abrir un mapa de árbol interactivo de su paquete de JavaScript: identifica grandes dependencias que inflan el tamaño de la transferencia.

Estrategia de compresión por objetivo de implementación

Vercel: Brotli y GZIP se manejan automáticamente en el borde; configure compress: true para el respaldo del tiempo de ejecución de Node.js y omita el complemento del paquete web. Servidor Node.js: habilite compress: true para respuestas dinámicas y use el complemento webpack para activos estáticos. Docker detrás de Nginx: deshabilite la compresión: false y configure Nginx GZIP/Brotli; evita la doble compresión. Exportación estática: utilice el complemento del paquete web para precomprimir todos los archivos estáticos y configurar su CDN o Nginx para servir las variantes precomprimidas. Utilice el generador de configuración de compresión next.js para obtener la configuración correcta para su implementación específica.

Preguntas frecuentes

Un generador de configuración de compresión next.js produce un next.config.js o next.config.mjs listo para pegar con configuraciones de compresión optimizadas para su objetivo de implementación. Nuestro generador de configuración de compresión next.js en línea gratuito admite Vercel, Node.js, exportación estática e implementaciones de Docker, con advertencias en tiempo real para configuraciones incorrectas comunes.

Configure compress: true si su servidor Next.js maneja las respuestas directamente. Establezca compress: false si Nginx, Caddy o CDN manejan la compresión delante de Next.js; esto evita la sobrecarga de doble compresión.

Sí: Vercel aplica automáticamente la compresión Brotli y GZIP en el borde para todas las respuestas. No necesita el complemento de paquete web de compresión ni encabezados personalizados en Vercel.

Sí. Toda la generación de configuración se ejecuta completamente en su navegador mediante JavaScript. No se envían datos de configuración a ningún servidor, no se almacenan de forma remota ni se transmiten a través de la red.

Sí, 100% gratis, para siempre. Sin registro, sin cuenta, sin nivel premium y sin anuncios. Genera configuraciones de compresión Next.js ilimitadas completamente gratis.

next.config.mjs usa la sintaxis del módulo ES (importación/exportación) y es el valor predeterminado para los nuevos proyectos Next.js 14+. next.config.js usa la sintaxis CommonJS (require/module.exports) para proyectos más antiguos. Elija según el sistema de módulos de su proyecto.

Instale el complemento de paquete web de compresión y agréguelo a la configuración de su paquete web con el algoritmo: "brotliCompress". Esto genera archivos .br junto con sus archivos .js y .css. Configure su servidor para servir archivos precomprimidos: Nginx necesita brotli_static activado, Caddy usa file_server con br gzip precomprimido.

swcMinify: true utiliza el compilador basado en SWC Rust para la minificación de JavaScript, aproximadamente 17 veces más rápido que Terser con un tamaño de salida equivalente. Es la opción predeterminada en Next.js 13+ y la única opción en Next.js 15.

Pruebe con curl: "curl -H "Accept-Encoding: gzip" -I https://yoursite.com/" y busque Content-Encoding: gzip en los encabezados de respuesta. En DevTools del navegador, marque la pestaña Red → seleccione un archivo JS o CSS → Encabezados de respuesta → Codificación de contenido.