Options de next.config.js

Next.js peut être configuré via un fichier next.config.js à la racine de votre répertoire de projet (par exemple, à côté de package.json).

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  /* options de configuration ici */
}

module.exports = nextConfig

next.config.js est un module Node.js standard, pas un fichier JSON. Il est utilisé par le serveur Next.js et les phases de build, et n'est pas inclus dans le build du navigateur.

Si vous avez besoin de modules ECMAScript, vous pouvez utiliser next.config.mjs :

next.config.mjs
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* options de configuration ici */
}

export default nextConfig

Vous pouvez aussi utiliser une fonction :

next.config.mjs
module.exports = (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* options de configuration ici */
  }
  return nextConfig
}

Depuis Next.js 12.1.0, vous pouvez utiliser une fonction asynchrone :

next.config.js
module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* options de configuration ici */
  }
  return nextConfig
}

phase est le contexte actuel dans lequel la configuration est chargée. Vous pouvez voir les phases disponibles. Les phases peuvent être importées depuis next/constants :

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* options de configuration spécifiques au développement ici */
    }
  }

  return {
    /* options de configuration pour toutes les phases sauf le développement ici */
  }
}

Les lignes commentées sont l'endroit où vous pouvez placer les configurations autorisées par next.config.js, qui sont définies dans ce fichier.

Cependant, aucune de ces configurations n'est obligatoire, et il n'est pas nécessaire de comprendre ce que fait chaque configuration. À la place, recherchez les fonctionnalités que vous souhaitez activer ou modifier dans cette section et elles vous indiqueront quoi faire.

Évitez d'utiliser de nouvelles fonctionnalités JavaScript non disponibles dans votre version cible de Node.js. next.config.js ne sera pas parsé par Webpack, Babel ou TypeScript.

Cette page documente toutes les options de configuration disponibles :

appDir

Activez le routeur d'application (App Router) pour utiliser les mises en page (layouts), le streaming et plus encore.

assetPrefix

Apprenez à utiliser l'option de configuration assetPrefix pour configurer votre CDN.

basePath

Utilisez `basePath` pour déployer une application Next.js sous un sous-chemin d'un domaine.

Compression

Next.js fournit une compression gzip pour compresser le contenu rendu et les fichiers statiques, cela ne fonctionne qu'avec la cible serveur. Apprenez-en plus ici.

Indicateurs de développement

Les pages optimisées incluent un indicateur pour vous informer si elles sont optimisées statiquement. Vous pouvez le désactiver ici.

distDir

Définir un répertoire de build personnalisé à utiliser à la place du répertoire .next par défaut.

env

Apprenez à ajouter et accéder aux variables d'environnement dans votre application Next.js au moment de la compilation.

eslint

Next.js signale par défaut les erreurs et avertissements ESLint lors des builds. Apprenez ici comment désactiver ce comportement.

exportPathMap

Personnalisez les pages qui seront exportées en tant que fichiers HTML lors de l'utilisation de `next export`.

generateBuildId

Configure l'identifiant de build utilisé pour identifier la version actuelle de votre application en cours de service.

generateEtags

Next.js génère des etags pour chaque page par défaut. Apprenez comment désactiver la génération d'etags ici.

headers

Ajoutez des en-têtes HTTP personnalisés à votre application Next.js.

httpAgentOptions

Next.js utilise automatiquement HTTP Keep-Alive par défaut. Apprenez comment désactiver HTTP Keep-Alive ici.

images

Configuration personnalisée pour le chargeur next/image

incrementalCacheHandlerPath

Configuration du cache Next.js utilisé pour stocker et revalider les données.

mdxRs

Utilisez le nouveau compilateur Rust pour compiler les fichiers MDX dans le routeur d'application (App Router).

onDemandEntries

Configurez comment Next.js gère la conservation en mémoire des pages créées en développement.

optimizePackageImports

Référence API pour l'option de configuration optimizePackageImports de Next.js

output

Next.js trace automatiquement les fichiers nécessaires à chaque page pour faciliter le déploiement de votre application. Découvrez comment cela fonctionne ici.

pageExtensions

Étendre les extensions de page par défaut utilisées par Next.js pour la résolution des pages dans le routeur Pages.

poweredByHeader

Next.js ajoute par défaut l'en-tête `x-powered-by`. Apprenez ici comment le désactiver.

productionBrowserSourceMaps

Active la génération de source maps dans le navigateur lors de la build de production.

reactStrictMode

L'intégralité du runtime Next.js est désormais conforme au Mode Strict, découvrez comment l'activer

redirections

Ajoutez des redirections à votre application Next.js.

rewrites

Ajoutez des réécritures d'URL à votre application Next.js.

serverComponentsExternalPackages

Exclure des dépendances spécifiques du bundling des composants serveur et utiliser le `require` natif de Node.js.

trailingSlash

Configuration des pages Next.js pour résoudre avec ou sans barre oblique de fin d'URL.

transpilePackages

Transpile et regroupe automatiquement les dépendances de packages locaux (comme les monorepos) ou de dépendances externes (`node_modules`). Cela remplace le package `next-transpile-modules`.

turbo

Configuration de Next.js avec des options spécifiques à Turbopack

typedRoutes

Active le support expérimental pour les liens typés statiquement.

TypeScript

Next.js signale les erreurs TypeScript par défaut. Apprenez ici comment désactiver ce comportement.

Importations depuis des URL

Configurer Next.js pour autoriser l'importation de modules depuis des URL externes (expérimental).

webpack

Apprenez à personnaliser la configuration webpack utilisée par Next.js

webVitalsAttribution

Apprenez à utiliser l'option webVitalsAttribution pour identifier la source des problèmes liés aux Web Vitals.