Opciones de next.config.js

Next.js puede configurarse mediante un archivo next.config.js en la raíz de tu directorio del proyecto (por ejemplo, junto a package.json) con una exportación por defecto.

next.config.js
// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  /* opciones de configuración aquí */
}

module.exports = nextConfig

next.config.js es un módulo normal de Node.js, no un archivo JSON. Es utilizado por el servidor de Next.js y en las fases de construcción, y no se incluye en el build del navegador.

Si necesitas módulos ECMAScript, puedes usar next.config.mjs:

next.config.mjs
// @ts-check

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* opciones de configuración aquí */
}

export default nextConfig

También puedes usar una función:

next.config.mjs
// @ts-check

export default (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* opciones de configuración aquí */
  }
  return nextConfig
}

Desde Next.js 12.1.0, puedes usar una función asíncrona:

next.config.js
// @ts-check

module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* opciones de configuración aquí */
  }
  return nextConfig
}

phase es el contexto actual en el que se carga la configuración. Puedes ver las fases disponibles. Las fases se pueden importar desde next/constants:

// @ts-check

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

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* opciones de configuración solo para desarrollo aquí */
    }
  }

  return {
    /* opciones de configuración para todas las fases excepto desarrollo aquí */
  }
}

Las líneas comentadas son el lugar donde puedes colocar las configuraciones permitidas por next.config.js, que están definidas en este archivo.

Sin embargo, ninguna de las configuraciones es obligatoria, y no es necesario entender qué hace cada una. En su lugar, busca las características que necesitas habilitar o modificar en esta sección y te mostrarán qué hacer.

Evita usar características nuevas de JavaScript que no estén disponibles en tu versión objetivo de Node.js. next.config.js no será analizado por Webpack, Babel o TypeScript.

Esta página documenta todas las opciones de configuración disponibles:

assetPrefix

Aprenda a usar la opción de configuración assetPrefix para configurar su CDN.

basePath

Utilice `basePath` para desplegar una aplicación Next.js en un subdirectorio de un dominio.

compresión

Next.js proporciona compresión gzip para comprimir contenido renderizado y archivos estáticos, solo funciona con el objetivo de servidor. Aprende más aquí.

crossOrigin

Utilice la opción `crossOrigin` para agregar una etiqueta crossOrigin en las etiquetas `script` generadas por `next/script` y `next/head`.

Indicadores de desarrollo (devIndicators)

Las páginas optimizadas incluyen un indicador para mostrar si están siendo optimizadas estáticamente. Puedes desactivarlo aquí.

distDir

Establece un directorio de compilación personalizado para usar en lugar del directorio .next predeterminado.

Variables de entorno (env)

Aprenda a agregar y acceder a variables de entorno en su aplicación Next.js durante el tiempo de compilación.

eslint

Next.js reporta errores y advertencias de ESLint durante las compilaciones por defecto. Aprende cómo desactivar este comportamiento aquí.

exportPathMap

Personaliza las páginas que se exportarán como archivos HTML al usar `next export`.

generateBuildId

Configura el ID de compilación, que se utiliza para identificar la compilación actual en la que se sirve tu aplicación.

generateEtags

Next.js generará etags para cada página por defecto. Aprenda cómo desactivar la generación de etags aquí.

Encabezados (headers)

Agregue encabezados HTTP personalizados a su aplicación Next.js.

httpAgentOptions

Next.js utiliza automáticamente HTTP Keep-Alive de forma predeterminada. Aprenda cómo deshabilitar HTTP Keep-Alive aquí.

Imágenes

Configuración personalizada para el cargador de next/image

instrumentationHook

Utilice la opción instrumentationHook para configurar la instrumentación en su aplicación Next.js.

onDemandEntries

Configura cómo Next.js gestionará y mantendrá en memoria las páginas creadas en desarrollo.

optimizePackageImports

Referencia de API para la opción de configuración optimizePackageImports en Next.js

output

Next.js rastrea automáticamente los archivos necesarios para cada página, lo que facilita la implementación de tu aplicación. Aprende cómo funciona aquí.

pageExtensions

Extiende las extensiones de página predeterminadas utilizadas por Next.js al resolver páginas en el Enrutador de Páginas (Pages Router).

poweredByHeader

Next.js agrega el encabezado `x-powered-by` por defecto. Aprende cómo desactivarlo aquí.

productionBrowserSourceMaps

Habilita la generación de mapas de origen (source maps) del navegador durante la construcción para producción.

reactStrictMode

El runtime completo de Next.js ahora cumple con el Modo Estricto (Strict Mode), aprende cómo activarlo

Redirecciones

Agregue redirecciones a su aplicación Next.js.

reescrituras (rewrites)

Agrega reescrituras (rewrites) a tu aplicación Next.js

Configuración en tiempo de ejecución (Runtime Config)

Agrega configuración en tiempo de ejecución para cliente y servidor a tu aplicación Next.js.

trailingSlash

Configurar páginas de Next.js para que se resuelvan con o sin barra diagonal al final.

transpilePackages

Transpila y empaqueta automáticamente dependencias de paquetes locales (como monorepos) o de dependencias externas (`node_modules`).

turbo

Configura Next.js con opciones específicas de Turbopack

TypeScript

Next.js reporta errores de TypeScript por defecto. Aprenda cómo desactivar este comportamiento aquí.

Importaciones desde URL (urlImports)

Configura Next.js para permitir la importación de módulos desde URLs externas (experimental).

webpack

Aprende a personalizar la configuración de webpack utilizada por Next.js

webVitalsAttribution

Aprenda a usar la opción webVitalsAttribution para identificar el origen de problemas con las métricas Web Vitals.