Benutzerdefinierte Webpack-Konfiguration

Wichtig: Änderungen an der webpack-Konfiguration sind nicht durch semver abgedeckt, gehen Sie also auf eigenes Risiko vor

Bevor Sie mit dem Hinzufügen einer benutzerdefinierten webpack-Konfiguration zu Ihrer Anwendung fortfahren, vergewissern Sie sich, dass Next.js Ihren Anwendungsfall nicht bereits unterstützt:

• CSS-Imports
• CSS-Module
• Sass/SCSS-Imports
• Sass/SCSS-Module
• preact
• Anpassen der Babel-Konfiguration

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

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

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

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Wichtig: geben Sie die modifizierte Konfiguration zurück
    return config
  },
}

Die webpack-Funktion wird zweimal ausgeführt, einmal für den Server und einmal für den Client. Dadurch können Sie mit der Eigenschaft isServer zwischen Client- und Server-Konfiguration unterscheiden.

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

• buildId: String - Die Build-ID, die als eindeutiger Identifier zwischen Builds verwendet wird
• 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 - Standardmäßige babel-loader-Konfiguration

Beispielverwendung 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. nextRuntime "edge" ist derzeit nur für Middleware und Server-Komponenten im Edge-Runtime vorgesehen.