Pular para o conteúdo
Aback Tools Logo

Gerador de configuração de compactação Next.js

Gere um next.config.js ou next.config.mjs pronto para produção com configurações de compactação GZIP e Brotli otimizadas para seu destino de implantação. Selecione sua versão Next.js, formato de configuração e plataforma de implantação - Vercel, Node.js, exportação estática ou Docker - e o gerador de configuração de compactação next.js produz a configuração correta de compactação, configuração do plug-in webpack e cabeçalhos. Inclui avisos específicos de implantação e o comando npm install para pacotes necessários. Toda a geração acontece no seu navegador sem necessidade de inscrição.

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 que usar nosso gerador de configuração de compactação Next.js?

  • Configuração de compactação instantânea Next.js: gere um next.config.js ou next.config.mjs pronto para produção com configurações de compactação otimizadas instantaneamente - sem mergulho na documentação do Next.js, sem tentativa e erro. Nosso gerador de configuração de compactação next.js produz uma configuração formatada corretamente para seu destino de implantação específico em segundos.
  • Gerador de configuração de compactação Next.js seguro on-line: suas opções de configuração nunca saem do seu dispositivo quando você usa este gerador de configuração de compactação next.js. Toda a geração de configurações é executada inteiramente no seu navegador - sem solicitações de servidor, sem retenção de dados, 100% privada. Seguro para configurar aplicativos Next.js de produção.
  • Gerador de configuração de compactação Next.js - sem instalação: gere configurações de compactação Next.js diretamente em qualquer navegador moderno, sem downloads de software, sem instalação de Node.js e sem necessidade de conta. O gerador de configuração de compactação next.js funciona em Windows, macOS, Linux e dispositivos móveis.
  • Configuração com reconhecimento de implantação com avisos: o gerador de configuração de compactação next.js se adapta ao seu destino de implantação - Vercel, Node.js, exportação estática ou Docker - e mostra avisos em tempo real para configurações incorretas comuns, como compactação dupla quando atrás de um proxy reverso.

Casos de uso comuns para gerador de configuração de compactação Next.js

  • Otimização de implantação Vercel: Configure a compactação Next.js para implantações Vercel onde Brotli e GZIP são tratados automaticamente na borda. O gerador de configuração de compactação next.js produz as configurações corretas - habilitando compress: true para o fallback de tempo de execução do Node.js sem plug-ins de webpack desnecessários.
  • Implantações Docker e auto-hospedadas: configure a compactação Next.js para contêineres Docker atrás de Nginx ou Caddy. O gerador de configuração de compactação next.js avisa contra compactação dupla e gera a configuração compress: false correta quando seu proxy reverso lida com GZIP e Brotli.
  • Exportação estática com entrega de CDN: gere configuração de compactação Next.js para exportações estáticas (próxima exportação) servidas de um CDN. O gerador de configuração de compactação next.js inclui a configuração do webpack CompressionPlugin para pré-compactar arquivos.js,.css e.html para.gz e.br no momento da construção.
  • Melhoria do Core Web Vitals: Reduza os tamanhos de transferência de JavaScript e CSS para melhorar as pontuações de LCP e FID. O gerador de configuração de compactação next.js produz uma configuração que permite minificação de SWC, otimização de imagem e pré-compactação - melhorando diretamente Core Web Vitals no PageSpeed ​​​​Insights.
  • Nova configuração do projeto Next.js: ao iniciar um novo projeto Next.js, use o gerador de configuração de compactação next.js para obter um next.config.mjs pronto para produção desde o início. O gerador inclui todas as configurações recomendadas para seu objetivo de implantação, economizando horas de pesquisa de documentação.
  • Otimização do tamanho do pacote: adicione o wrapper @next/bundle-analyzer ao seu next.config.js para identificar grandes dependências que aumentam seu pacote JavaScript. O gerador de configuração de compactação next.js inclui a configuração do analisador de pacote junto com as configurações de compactação para uma configuração de otimização completa.

O que é configuração de compactação Next.js?

A configuração de compactação Next.js controla como seu aplicativo Next.js compacta respostas HTTP e ativos estáticos. Next.js tem uma opção de compactação integrada que permite a compactação GZIP para respostas renderizadas pelo servidor usando o módulo zlib integrado do Node.js. Para ativos estáticos (JavaScript, CSS, HTML), Next.js pode pré-compactar arquivos em tempo de construção usando o plugin compression-webpack - gerando arquivos.gz e.br junto com os originais. Nosso gerador de configuração de compactação next.js produz um next.config.js ou next.config.mjs formatado corretamente, adaptado ao seu destino de implantação - Vercel, Node.js, exportação estática ou Docker.

Como funciona nosso gerador de configuração de compactação Next.js

  1. 1 Selecione suas opções: Escolha sua versão Next.js (14 ou 15), formato de arquivo de configuração (ESM ou CJS), destino de implantação e opções de compactação. O gerador de configuração de compactação next.js atualiza a saída em tempo real conforme você ajusta cada opção - não é necessário pressionar nenhum botão.
  2. 2 Revise os avisos e instale os pacotes: O gerador de configuração de compactação next.js mostra avisos específicos da implantação - como desabilitar compress: true quando estiver atrás de um proxy reverso - e gera o comando npm install para quaisquer pacotes necessários. Toda a geração é executada no seu navegador.
  3. 3 Copie e substitua seu arquivo next.config: Clique em Copiar para copiar a configuração gerada para sua área de transferência. Substitua seu next.config.js ou next.config.mjs existente e execute npm run build para aplicar as alterações.

Principais configurações de compactação Next.js explicadas

  • compress: true/false: ativa ou desativa a compactação GZIP integrada do Next.js para respostas renderizadas pelo servidor. Definido como verdadeiro para implantações do Node.js sem proxy reverso. Defina como falso quando Nginx, Caddy ou um CDN lida com compactação - evita sobrecarga de compactação dupla.
  • compression-webpack-plugin: Pré-compacta ativos estáticos (JS, CSS, HTML, SVG, JSON) para arquivos.gz e.br no momento da construção. O servidor então fornece o arquivo pré-compactado diretamente - eliminando a sobrecarga da CPU de compactação em tempo de execução. Requer suporte do lado do servidor (serviço de arquivo estático Nginx gzip_static, brotli_static ou CDN).
  • swcMinify: true: usa o compilador SWC para minificação de JavaScript em vez de Terser - 17× mais rápido com tamanho de saída equivalente. Padrão em Next.js 13+ e a única opção em Next.js 15.
  • @next/bundle-analyzer: agrupa a configuração do Next.js para adicionar a visualização do pacote. Execute ANALYZE=true npm run build para abrir um mapa de árvore interativo do seu pacote JavaScript - identifica grandes dependências que aumentam o tamanho da transferência.

Estratégia de compactação por destino de implantação

Vercel: Brotli e GZIP são tratados automaticamente na borda - defina compress: true para o fallback do tempo de execução do Node.js e ignore o plugin do webpack. Servidor Node.js: habilite compress: true para respostas dinâmicas e use o plugin webpack para ativos estáticos. Docker por trás do Nginx: Desative compress: false e configure Nginx GZIP/Brotli - evita compactação dupla. Exportação estática: use o plugin webpack para pré-compactar todos os arquivos estáticos e configurar seu CDN ou Nginx para servir as variantes pré-compactadas. Use o gerador de configuração de compactação next.js para obter a configuração correta para sua implantação específica.

Perguntas frequentes

Um gerador de configuração de compactação next.js produz um next.config.js ou next.config.mjs pronto para colar com configurações de compactação otimizadas para seu destino de implantação. Nosso gerador de configuração de compactação next.js gratuito on-line oferece suporte a implantações Vercel, Node.js, exportação estática e Docker - com avisos em tempo real para configurações incorretas comuns.

Defina compress: true se o seu servidor Next.js lidar com as respostas diretamente. Defina compress: false se Nginx, Caddy ou um CDN manipular a compactação na frente do Next.js - isso evita sobrecarga de compactação dupla.

Sim - o Vercel aplica automaticamente a compactação Brotli e GZIP na borda para todas as respostas. Você não precisa do plugin de compressão webpack ou de cabeçalhos personalizados no Vercel.

Sim. Toda a geração de configuração é executada inteiramente no seu navegador usando JavaScript. Nenhum dado de configuração é enviado a nenhum servidor, armazenado remotamente ou transmitido pela rede.

Sim - 100% grátis, para sempre. Sem inscrição, sem conta, sem nível premium e sem anúncios. Gere configurações de compactação Next.js ilimitadas de forma totalmente gratuita.

next.config.mjs usa a sintaxe do Módulo ES (importação/exportação) e é o padrão para novos projetos Next.js 14+. next.config.js usa sintaxe CommonJS (require/module.exports) para projetos mais antigos. Escolha com base no sistema de módulos do seu projeto.

Instale o compression-webpack-plugin e adicione-o à configuração do seu webpack com o algoritmo: "brotliCompress". Isso gera arquivos .br junto com seus arquivos .js e .css. Configure seu servidor para servir arquivos pré-compactados: Nginx precisa de brotli_static ativado, Caddy usa file_server com br gzip pré-compactado.

swcMinify: true usa o compilador SWC Rust para minificação de JavaScript - aproximadamente 17× mais rápido que Terser com tamanho de saída equivalente. É o padrão em Next.js 13+ e a única opção em Next.js 15.

Teste com curl: "curl -H "Accept-Encoding: gzip" -I https://yoursite.com/" e procure Content-Encoding: gzip nos cabeçalhos de resposta. No DevTools do navegador, verifique a guia Rede → selecione um arquivo JS ou CSS → Cabeçalhos de resposta → Codificação de conteúdo.