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 añadiendo configuración personalizada de webpack a tu aplicación, asegúrate de que Next.js no soporte ya tu caso de uso:

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

Algunas características comúnmente solicitadas 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, así:

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

La función webpack se ejecuta dos veces, una para el servidor y otra 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, usado 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 usados internamente por Next.js:
  • babel: Object - Configuración predeterminada de babel-loader

Ejemplo de uso de defaultLoaders.babel:

// Ejemplo de configuración para añadir 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", nextRuntime "edge" es actualmente solo para middleware y Componentes del Servidor en el runtime edge.