Benutzerdefinierte Webpack-Konfiguration

Wichtig: Änderungen an der Webpack-Konfiguration sind nicht durch semver abgedeckt, daher auf eigenes Risiko

Bevor Sie mit der Anpassung der Webpack-Konfiguration für Ihre Anwendung fortfahren, vergewissern Sie sich, dass Next.js Ihren Anwendungsfall nicht bereits unterstützt:

• CSS-Importe
• CSS-Module
• Sass/SCSS-Importe
• Sass/SCSS-Module
• Anpassen der Babel-Konfiguration

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

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

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

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 (Node.js / Edge-Runtime) und einmal für den Client. Dadurch können Sie mit der Eigenschaft isServer zwischen Client- und Serverkonfiguration unterscheiden.

Das zweite Argument der webpack-Funktion ist ein Objekt mit folgenden Eigenschaften:

• buildId: String - Die Build-ID, die als eindeutiger Identifier zwischen Builds dient.
• dev: Boolean - Gibt an, ob die Kompilierung im Entwicklungsmodus erfolgt.
• isServer: Boolean - Ist true für die Server-seitige Kompilierung und false für die Client-seitige Kompilierung.
• nextRuntime: String | undefined - Die Ziel-Runtime für die Server-seitige Kompilierung; entweder "edge" oder "nodejs", für die Client-seitige Kompilierung ist es undefined.
• defaultLoaders: Object - Standard-Loader, die intern von Next.js verwendet werden:
  • babel: Object - Standard babel-loader Konfiguration.

Beispiel für die Verwendung von defaultLoaders.babel:

// Beispielkonfiguration für das Hinzufügen eines Loaders, der von babel-loader abhängt
// Diese Quelle stammt aus dem @next/mdx Plugin-Quellcode:
// 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. Derzeit wird nextRuntime "edge" nur für Middleware und Server-Komponenten in der Edge-Runtime verwendet.