Configuración personalizada de Webpack

Es bueno saberlo: los cambios en la configuración de webpack no están cubiertos por semver, así que procede bajo tu propio riesgo.

Antes de continuar con la personalización de la configuración de webpack en tu aplicación, asegúrate de que Next.js no admita ya tu caso de uso:

• Importaciones CSS
• Módulos CSS
• Importaciones Sass/SCSS
• Módulos Sass/SCSS
• Personalización de la configuración de Babel

Algunas funcionalidades solicitadas comúnmente están disponibles como plugins:

• @next/mdx
• @next/bundle-analyzer

Para extender nuestro uso de webpack, puedes definir una función que extienda su configuración dentro de next.config.js, de la siguiente manera:

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Importante: devuelve la configuración modificada
    return config
  },
}

La función webpack se ejecuta tres veces, dos veces para el servidor (runtime nodejs / edge) y una para el cliente. Esto te permite distinguir entre la configuración del cliente y del servidor usando la propiedad isServer.

El segundo argumento de la función webpack es un objeto con las siguientes propiedades:

• buildId: String - El ID de compilación, utilizado como identificador único entre compilaciones
• dev: Boolean - Indica si la compilación se realizará en desarrollo
• isServer: Boolean - Es true para la compilación del lado del servidor y false para la del cliente
• nextRuntime: String | undefined - El runtime objetivo para la compilación del servidor; puede ser "edge" o "nodejs", es undefined para la compilación del cliente
• defaultLoaders: Object - Loaders predeterminados utilizados internamente por Next.js:
  • babel: Object - Configuración predeterminada de babel-loader

Ejemplo de uso de defaultLoaders.babel:

// Ejemplo de configuración para agregar un loader que depende de babel-loader
// Este código fue tomado del código fuente del plugin @next/mdx:
// https://github.com/vercel/next.js/tree/canary/packages/next-mdx
module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.mdx/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: '@mdx-js/loader',
          options: pluginOptions.options,
        },
      ],
    })

    return config
  },
}

nextRuntime

Ten en cuenta que isServer es true cuando nextRuntime es "edge" o "nodejs". Actualmente, nextRuntime "edge" es solo para middleware y Componentes del Servidor en el runtime edge.