Opciones de next.config.js

Next.js se puede configurar mediante un archivo next.config.js en la raíz de tu directorio de proyecto (por ejemplo, junto a package.json).

next.config.js
/** @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
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* opciones de configuración aquí */
}

export default nextConfig

También puedes usar una función:

next.config.mjs
module.exports = (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
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:

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, las cuales están definidas en este archivo.

Sin embargo, ninguna de las configuraciones es obligatoria, y no es necesario entender lo que 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:

appDir

Active el Enrutador de Aplicación (App Router) para usar diseños (layouts), transmisión en flujo (streaming) y más.

assetPrefix

Aprende a usar la opción de configuración assetPrefix para configurar tu CDN.

basePath

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

Compresión

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

Indicadores de desarrollo

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

distDir

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

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. Aprenda cómo desactivar este comportamiento aquí.

exportPathMap

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

generateBuildId

Configure el ID de compilación, que se utiliza para identificar la compilación actual en la que se está sirviendo su aplicación.

generateEtags

Next.js genera etags para cada página por defecto. Aprende cómo deshabilitar la generación de etags aquí.

Encabezados (headers)

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

Opciones de httpAgent

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 next/image

incrementalCacheHandlerPath

Configuración de la caché de Next.js utilizada para almacenar y revalidar datos.

mdxRs

Utilice el nuevo compilador Rust para compilar archivos MDX en el App Router.

onDemandEntries

Configura cómo Next.js descartará 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, facilitando el despliegue 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 deshabilitarlo aquí.

productionBrowserSourceMaps

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

reactStrictMode

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

redirecciones

Agrega redirecciones a tu aplicación Next.js.

rewrites

Agregar rewrites a tu aplicación Next.js.

serverComponentsExternalPackages

Excluir dependencias específicas del empaquetado de Componentes del Servidor y usar el `require` nativo de Node.js.

trailingSlash

Configuración de páginas en Next.js para resolver con o sin barra diagonal final.

transpilePackages

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

turbo

Configura Next.js con opciones específicas de Turbopack

typedRoutes

Habilita soporte experimental para enlaces con tipado estático.

TypeScript

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

Importaciones desde URL

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

webpack

Aprende cómo 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.