Configuración personalizada de Webpack

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

Antes de continuar con la adición de configuración personalizada de webpack a su aplicación, asegúrese de que Next.js no admita ya su caso de uso:

• Importaciones CSS
• Módulos CSS
• Importaciones Sass/SCSS
• Módulos Sass/SCSS

Algunas características comúnmente solicitadas están disponibles como plugins:

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

Para extender nuestro uso de webpack, puede 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: devuelva la configuración modificada
    return config
  },
}

La función webpack se ejecuta tres veces, dos veces para el servidor (nodejs / edge runtime) y una vez para el cliente. Esto le permite distinguir entre la configuración del cliente y del servidor utilizando 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 lado del servidor; puede ser "edge" o "nodejs", es undefined para la compilación del lado del cliente.
• defaultLoaders: Object - Cargadores 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 cargador que depende de babel-loader
// Esta fuente fue tomada 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

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