Menu

Benutzerdefinierte Webpack-Konfiguration

Hinweis: Änderungen an der webpack-Konfiguration sind nicht durch Semver abgedeckt, daher gehen Sie auf eigenes Risiko vor

Bevor Sie mit der Hinzufügung einer benutzerdefinierten webpack-Konfiguration zu Ihrer Anwendung fortfahren, stellen Sie sicher, dass Next.js Ihren Anwendungsfall nicht bereits unterstützt:

Einige häufig gewünschte Funktionen sind als Plugins verfügbar:

Um die Verwendung von webpack zu erweitern, können Sie eine Funktion definieren, die dessen Konfiguration in next.config.js erweitert, wie folgt:

next.config.js
module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Wichtig: Die modifizierte Konfiguration zurückgeben
    return config
  },
}

Die webpack-Funktion wird dreimal ausgeführt, zweimal für den Server (nodejs / edge-Laufzeit) und einmal für den Client. Dies ermöglicht es Ihnen, zwischen Client- und Server-Konfiguration mithilfe der isServer-Eigenschaft zu unterscheiden.

Der zweite Parameter der webpack-Funktion ist ein Objekt mit den folgenden Eigenschaften:

  • buildId: String - Die Build-ID, verwendet als eindeutiger Bezeichner zwischen Builds
  • dev: Boolean - Zeigt an, ob die Kompilierung in der Entwicklung erfolgt
  • isServer: Boolean - Ist true für serverseitige Kompilierung und false für clientseitige Kompilierung
  • nextRuntime: String | undefined - Die Ziel-Laufzeit für serverseitige Kompilierung; entweder "edge" oder "nodejs", für clientseitige Kompilierung ist es undefined
  • defaultLoaders: Object - Standard-Loader, die intern von Next.js verwendet werden:
    • babel: Object - Standardmäßige babel-loader-Konfiguration

Beispielverwendung von defaultLoaders.babel:

// Beispielkonfiguration zum Hinzufügen eines Loaders, der von babel-loader abhängt
// Diese Quelle stammt aus der @next/mdx-Plugin-Quelle:
// 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

Beachten Sie, dass isServer true ist, wenn nextRuntime "edge" oder "nodejs" ist. nextRuntime "edge" ist derzeit nur für Middleware und Server-Komponenten in der Edge-Laufzeit.