Générateur de configuration de compression Next.js

Générez un next.config.js ou next.config.mjs prêt pour la production avec des paramètres de compression GZIP et Brotli optimisés pour votre cible de déploiement. Sélectionnez votre version Next.js, votre format de configuration et votre plate-forme de déploiement (Vercel, Node.js, exportation statique ou Docker) et le générateur de configuration de compression next.js produit le paramètre de compression, la configuration du plugin webpack et les en-têtes corrects. Inclut des avertissements spécifiques au déploiement et la commande npm install pour les packages requis. Toute génération s'effectue dans votre navigateur sans aucune inscription requise.

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/

Pourquoi utiliser notre générateur de configuration de compression Next.js ?

Configuration de compression Next.js instantanée : générez instantanément un next.config.js ou next.config.mjs prêt pour la production avec des paramètres de compression optimisés - pas de plongée dans la documentation Next.js, pas d'essais et d'erreurs. Notre générateur de configuration de compression next.js produit une configuration correctement formatée pour votre cible de déploiement spécifique en quelques secondes.
Générateur de configuration de compression Next.js sécurisé en ligne : vos choix de configuration ne quittent jamais votre appareil lorsque vous utilisez ce générateur de configuration de compression next.js. Toute la génération de configuration s'exécute entièrement dans votre navigateur - aucune requête de serveur, aucune conservation de données, 100 % privée. Sans danger pour la configuration des applications de production Next.js.
Générateur de configuration de compression Next.js - Aucune installation : générez des configurations de compression Next.js directement dans n'importe quel navigateur moderne sans téléchargement de logiciel, sans installation de Node.js et sans compte requis. Le générateur de configuration de compression next.js fonctionne sur Windows, macOS, Linux et mobile.
Configuration adaptée au déploiement avec avertissements : le générateur de configuration de compression next.js s'adapte à votre cible de déploiement - Vercel, Node.js, exportation statique ou Docker - et affiche des avertissements en temps réel pour les erreurs de configuration courantes telles que la double compression derrière un proxy inverse.

Cas d'utilisation courants du générateur de configuration de compression Next.js

Optimisation du déploiement Vercel : configurez la compression Next.js pour les déploiements Vercel où Brotli et GZIP sont gérés automatiquement en périphérie. Le générateur de configuration de compression next.js produit les paramètres corrects - activant compress: true pour la solution de secours d'exécution Node.js sans plugins Webpack inutiles.
Déploiements Docker et auto-hébergés : configurez la compression Next.js pour les conteneurs Docker derrière Nginx ou Caddy. Le générateur de configuration de compression next.js met en garde contre la double compression et génère le paramètre compress: false correct lorsque votre proxy inverse gère GZIP et Brotli.
Exportation statique avec livraison CDN : générez une configuration de compression Next.js pour les exportations statiques (prochaine exportation) servies à partir d'un CDN. Le générateur de configuration de compression next.js inclut la configuration Webpack CompressionPlugin pour pré-compresser les fichiers.js, .css et .html en .gz et.br au moment de la construction.
Amélioration de Core Web Vitals : réduisez les tailles de transfert JavaScript et CSS pour améliorer les scores LCP et FID. Le générateur de configuration de compression next.js produit une configuration qui permet la minification SWC, l'optimisation des images et la pré-compression, améliorant directement Core Web Vitals sur PageSpeed Insights.
Nouvelle configuration du projet Next.js : lors du démarrage d'un nouveau projet Next.js, utilisez le générateur de configuration de compression next.js pour obtenir un next.config.mjs prêt pour la production dès le début. Le générateur inclut tous les paramètres recommandés pour votre cible de déploiement, ce qui vous permet d'économiser des heures de recherche de documentation.
Optimisation de la taille du bundle : ajoutez le wrapper @next/bundle-analyzer à votre next.config.js pour identifier les grandes dépendances qui gonflent votre bundle JavaScript. Le générateur de configuration de compression next.js inclut la configuration de l'analyseur de bundle ainsi que les paramètres de compression pour une configuration d'optimisation complète.

Qu'est-ce que la configuration de compression Next.js ?

La configuration de compression Next.js contrôle la manière dont votre application Next.js compresse les réponses HTTP et les ressources statiques. Next.js dispose d'une option de compression intégrée qui permet la compression GZIP pour les réponses rendues par le serveur à l'aide du module zlib intégré de Node.js. Pour les ressources statiques (JavaScript, CSS, HTML), Next.js peut précompresser les fichiers au moment de la construction à l'aide du plugin compression-webpack-plugin - générant des fichiers.gz et.br à côté des originaux. Notre générateur de configuration de compression next.js produit un next.config.js ou next.config.mjs correctement formaté et adapté à votre cible de déploiement : Vercel, Node.js, exportation statique ou Docker.

Comment fonctionne notre générateur de configuration de compression Next.js

1 Sélectionnez vos options : Choisissez votre version Next.js (14 ou 15), le format de fichier de configuration (ESM ou CJS), la cible de déploiement et les options de compression. Le générateur de configuration de compression next.js met à jour la sortie en temps réel à mesure que vous ajustez chaque option - aucune pression sur un bouton n'est nécessaire.
2 Examinez les avertissements et installez les packages : le générateur de configuration de compression next.js affiche des avertissements spécifiques au déploiement - comme la désactivation de compress: true derrière un proxy inverse - et génère la commande npm install pour tous les packages requis. Toute génération s'exécute dans votre navigateur.
3 Copiez et remplacez votre fichier next.config : cliquez sur Copier pour copier la configuration générée dans votre presse-papiers. Remplacez votre next.config.js ou next.config.mjs existant et exécutez npm run build pour appliquer les modifications.

Paramètres de compression clés Next.js expliqués

compresser : vrai/faux : active ou désactive la compression GZIP intégrée à Next.js pour les réponses rendues par le serveur. Définissez sur true pour les déploiements Node.js sans proxy inverse. Défini sur false lorsque Nginx, Caddy ou un CDN gère la compression - évite la surcharge de double compression.
compression-webpack-plugin : précompresse les actifs statiques (JS, CSS, HTML, SVG, JSON) en fichiers.gz et.br au moment de la construction. Le serveur sert ensuite directement le fichier précompressé, éliminant ainsi la surcharge du processeur de compression à l'exécution. Nécessite une prise en charge côté serveur (service de fichiers statiques Nginx gzip_static, brotli_static ou CDN).
swcMinify : true : utilise le compilateur SWC pour la minification JavaScript au lieu de Terser - 17 fois plus rapide avec une taille de sortie équivalente. Par défaut dans Next.js 13+ et la seule option dans Next.js 15.
@next/bundle-analyzer : encapsule la configuration Next.js pour ajouter une visualisation de bundle. Exécutez ANALYZE=true npm run build pour ouvrir une arborescence interactive de votre bundle JavaScript - identifie les grandes dépendances qui gonflent la taille du transfert.

Stratégie de compression par cible de déploiement

Vercel : Brotli et GZIP sont gérés automatiquement en périphérie - définissez compress: true pour la solution de secours d'exécution Node.js et ignorez le plugin webpack. Serveur Node.js : activez compress : true pour les réponses dynamiques et utilisez le plugin webpack pour les actifs statiques. Docker derrière Nginx : Désactivez la compression : false et configurez Nginx GZIP/Brotli - évite la double compression. Exportation statique : utilisez le plugin webpack pour pré-compresser tous les fichiers statiques et configurez votre CDN ou Nginx pour servir les variantes pré-compressées. Utilisez le générateur de configuration de compression next.js pour obtenir la configuration correcte pour votre déploiement spécifique.

Foire aux questions

Un générateur de configuration de compression next.js produit un next.config.js ou next.config.mjs prêt à coller avec des paramètres de compression optimisés pour votre cible de déploiement. Notre générateur de configuration de compression next.js gratuit en ligne prend en charge les déploiements Vercel, Node.js, l'exportation statique et Docker - avec des avertissements en temps réel pour les erreurs de configuration courantes.

Définissez compress : true si votre serveur Next.js gère directement les réponses. Définissez compress : false si Nginx, Caddy ou un CDN gère la compression devant Next.js - cela évite la surcharge de double compression.

Oui - Vercel applique automatiquement la compression Brotli et GZIP en périphérie pour toutes les réponses. Vous n'avez pas besoin du plugin compression-webpack-plugin ou des en-têtes personnalisés sur Vercel.

Oui. Toute génération de configuration s'exécute entièrement dans votre navigateur à l'aide de JavaScript. Aucune donnée de configuration n'est envoyée à un serveur, stockée à distance ou transmise sur le réseau.

Oui, 100 % gratuit, pour toujours. Pas d'inscription, pas de compte, pas de niveau premium et pas de publicité. Générez des configurations de compression Next.js illimitées et entièrement gratuites.

next.config.mjs utilise la syntaxe du module ES (importation/exportation) et est la valeur par défaut pour les nouveaux projets Next.js 14+. next.config.js utilise la syntaxe CommonJS (require/module.exports) pour les projets plus anciens. Choisissez en fonction du système de modules de votre projet.

Installez compression-webpack-plugin et ajoutez-le à la configuration de votre webpack avec l'algorithme : "brotliCompress". Cela génère des fichiers .br à côté de vos fichiers .js et .css. Configurez votre serveur pour servir les fichiers pré-compressés : Nginx a besoin de brotli_static, Caddy utilise file_server avec br gzip précompressé.

swcMinify : true utilise le compilateur basé sur SWC Rust pour la minification JavaScript - environ 17 fois plus rapide que Terser avec une taille de sortie équivalente. Il s'agit de la valeur par défaut dans Next.js 13+ et de la seule option dans Next.js 15.

Testez avec curl : "curl -H "Accept-Encoding: gzip" -I https://yoursite.com/" et recherchez Content-Encoding: gzip dans les en-têtes de réponse. Dans les DevTools du navigateur, vérifiez l'onglet Réseau → sélectionnez un fichier JS ou CSS → En-têtes de réponse → Content-Encoding.