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) avec une exportation par défaut.

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  /* config options here */
}

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 navigateur.

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

// @ts-check

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
}

export default nextConfig

Vous pouvez également utiliser une fonction :

// @ts-check

export default (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

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

// @ts-check

module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  }
  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 :

// @ts-check

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

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* development only config options here */
    }
  }

  return {
    /* config options for all phases except development here */
  }
}

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 analysé par Webpack, Babel ou TypeScript.

Cette page documente toutes les options de configuration disponibles :