Configuration personnalisée de Webpack

Bon à savoir : les modifications de la configuration webpack ne sont pas couvertes par semver, procédez à vos propres risques.

Avant de continuer à ajouter une configuration webpack personnalisée à votre application, assurez-vous que Next.js ne prend pas déjà en charge votre cas d'utilisation :

• Importations CSS
• Modules CSS
• Importations Sass/SCSS
• Modules Sass/SCSS
• Personnalisation de la configuration babel

Certaines fonctionnalités fréquemment demandées sont disponibles sous forme de plugins :

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

Pour étendre notre utilisation de webpack, vous pouvez définir une fonction qui étend sa configuration dans next.config.js, comme ceci :

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Important : retournez la configuration modifiée
    return config
  },
}

La fonction webpack est exécutée trois fois, deux fois pour le serveur (runtime nodejs / edge) et une fois pour le client. Cela vous permet de distinguer la configuration client et serveur en utilisant la propriété isServer.

Le deuxième argument de la fonction webpack est un objet avec les propriétés suivantes :

• buildId: String - L'identifiant de build, utilisé comme identifiant unique entre les builds
• dev: Boolean - Indique si la compilation se fera en développement
• isServer: Boolean - true pour la compilation côté serveur, false pour la compilation côté client
• nextRuntime: String | undefined - Le runtime cible pour la compilation côté serveur ; soit "edge" ou "nodejs", undefined pour la compilation côté client.
• defaultLoaders: Object - Les loaders par défaut utilisés en interne par Next.js :
  • babel: Object - Configuration par défaut de babel-loader

Exemple d'utilisation de defaultLoaders.babel :

// Exemple de configuration pour ajouter un loader dépendant de babel-loader
// Cette source est tirée du 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

Notez que isServer est true lorsque nextRuntime est "edge" ou "nodejs", nextRuntime "edge" est actuellement réservé au middleware et aux composants serveur en runtime edge uniquement.