Next.js Compiler

Der Next.js Compiler, in Rust mit SWC geschrieben, ermöglicht es Next.js, Ihren JavaScript-Code für die Produktion zu transformieren und zu minimieren. Dies ersetzt Babel für einzelne Dateien und Terser für die Minimierung von Ausgabe-Bundles.

Die Kompilierung mit dem Next.js Compiler ist 17-mal schneller als Babel und standardmäßig seit Next.js Version 12 aktiviert. Wenn Sie eine bestehende Babel-Konfiguration haben oder nicht unterstützte Funktionen verwenden, wird Ihre Anwendung vom Next.js Compiler ausgenommen und verwendet weiterhin Babel.

Warum SWC?

SWC ist eine erweiterbare, auf Rust basierende Plattform für die nächste Generation von schnellen Entwickler-Tools.

SWC kann für Kompilierung, Minimierung, Bundling und mehr verwendet werden – und ist darauf ausgelegt, erweitert zu werden. Es ist etwas, das man aufrufen kann, um Codetransformationen durchzuführen (entweder integriert oder benutzerdefiniert). Die Ausführung dieser Transformationen erfolgt über übergeordnete Tools wie Next.js.

Wir haben uns aus mehreren Gründen für SWC entschieden:

• Erweiterbarkeit: SWC kann als Crate innerhalb von Next.js verwendet werden, ohne die Bibliothek forken oder Designbeschränkungen umgehen zu müssen.
• Leistung: Wir konnten Fast Refresh ~3-mal schneller und Builds ~5-mal schneller machen, indem wir zu SWC gewechselt haben, mit noch Raum für weitere Optimierungen.
• WebAssembly: Die Unterstützung von WebAssembly durch Rust ist entscheidend, um alle möglichen Plattformen zu unterstützen und Next.js-Entwicklung überall zu ermöglichen.
• Community: Die Rust-Community und das Ökosystem sind hervorragend und wachsen weiter.

Unterstützte Funktionen

Styled Components

Wir arbeiten daran, babel-plugin-styled-components zum Next.js Compiler zu portieren.

Aktualisieren Sie zunächst auf die neueste Version von Next.js: npm install next@latest. Aktualisieren Sie dann Ihre next.config.js-Datei:

module.exports = {
  compiler: {
    styledComponents: true,
  },
}

Für fortgeschrittene Anwendungsfälle können Sie einzelne Eigenschaften für die Styled-Components-Kompilierung konfigurieren.

Hinweis: ssr und displayName Transformationen sind die Hauptanforderung für die Verwendung von styled-components in Next.js.

module.exports = {
  compiler: {
    // Weitere Informationen unter https://styled-components.com/docs/tooling#babel-plugin zu den Optionen.
    styledComponents: {
      // Standardmäßig in der Entwicklung aktiviert, in der Produktion deaktiviert, um die Dateigröße zu reduzieren,
      // Die Einstellung überschreibt den Standard für alle Umgebungen.
      displayName?: boolean,
      // Standardmäßig aktiviert.
      ssr?: boolean,
      // Standardmäßig aktiviert.
      fileName?: boolean,
      // Standardmäßig leer.
      topLevelImportPaths?: string[],
      // Standardmäßig ["index"].
      meaninglessFileNames?: string[],
      // Standardmäßig aktiviert.
      minify?: boolean,
      // Standardmäßig aktiviert.
      transpileTemplateLiterals?: boolean,
      // Standardmäßig leer.
      namespace?: string,
      // Standardmäßig deaktiviert.
      pure?: boolean,
      // Standardmäßig aktiviert.
      cssProp?: boolean,
    },
  },
}

Jest

Der Next.js Compiler kompiliert Ihre Tests und vereinfacht die Konfiguration von Jest zusammen mit Next.js, einschließlich:

• Automatisches Mocken von .css, .module.css (und deren .scss-Varianten) und Bilderimporten
• Automatische Einrichtung von transform mit SWC
• Laden von .env (und allen Varianten) in process.env
• Ignorieren von node_modules beim Test-Resolving und bei Transformationen
• Ignorieren von .next beim Test-Resolving
• Laden von next.config.js für Flags, die experimentelle SWC-Transformationen aktivieren

Aktualisieren Sie zunächst auf die neueste Version von Next.js: npm install next@latest. Aktualisieren Sie dann Ihre jest.config.js-Datei:

const nextJest = require('next/jest')
 
// Bereitstellen des Pfads zu Ihrer Next.js-App, der das Laden von next.config.js und .env-Dateien ermöglicht
const createJestConfig = nextJest({ dir: './' })
 
// Jede benutzerdefinierte Konfiguration, die Sie an Jest übergeben möchten
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}
 
// createJestConfig wird so exportiert, dass next/jest die Next.js-Konfiguration laden kann, die asynchron ist
module.exports = createJestConfig(customJestConfig)

Relay

So aktivieren Sie Relay-Unterstützung:

module.exports = {
  compiler: {
    relay: {
      // Dies sollte relay.config.js entsprechen
      src: './',
      artifactDirectory: './__generated__',
      language: 'typescript',
      eagerEsModules: false,
    },
  },
}

Hinweis: In Next.js werden alle JavaScript-Dateien im pages-Verzeichnis als Routen betrachtet. Daher müssen Sie für relay-compiler die artifactDirectory-Konfigurationseinstellungen außerhalb von pages angeben, da sonst relay-compiler Dateien neben der Quelldatei im __generated__-Verzeichnis generiert, und diese Datei als Route betrachtet wird, was Produktions-Builds unterbrechen würde.

React-Eigenschaften entfernen

Ermöglicht das Entfernen von JSX-Eigenschaften. Dies wird oft zum Testen verwendet. Ähnlich wie babel-plugin-react-remove-properties.

So entfernen Sie Eigenschaften, die dem Standard-Regex ^data-test entsprechen:

module.exports = {
  compiler: {
    reactRemoveProperties: true,
  },
}

So entfernen Sie benutzerdefinierte Eigenschaften:

module.exports = {
  compiler: {
    // Die hier definierten Regulären Ausdrücke werden in Rust verarbeitet, daher ist die Syntax anders als
    // JavaScript `RegExp`s. Weitere Informationen unter https://docs.rs/regex.
    reactRemoveProperties: { properties: ['^data-custom$'] },
  },
}

Console entfernen

Diese Transformation ermöglicht das Entfernen aller console.*-Aufrufe im Anwendungscode (nicht in node_modules). Ähnlich wie babel-plugin-transform-remove-console.

Alle console.*-Aufrufe entfernen:

module.exports = {
  compiler: {
    removeConsole: true,
  },
}

console.*-Ausgabe außer console.error entfernen:

module.exports = {
  compiler: {
    removeConsole: {
      exclude: ['error'],
    },
  },
}

Legacy Decorators

Next.js erkennt automatisch experimentalDecorators in jsconfig.json oder tsconfig.json. Legacy Decorators werden häufig mit älteren Versionen von Bibliotheken wie mobx verwendet.

Dieses Flag wird nur zur Kompatibilität mit bestehenden Anwendungen unterstützt. Wir empfehlen nicht, Legacy Decorators in neuen Anwendungen zu verwenden.

Aktualisieren Sie zunächst auf die neueste Version von Next.js: npm install next@latest. Aktualisieren Sie dann Ihre jsconfig.json oder tsconfig.json-Datei:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

importSource

Next.js erkennt automatisch jsxImportSource in jsconfig.json oder tsconfig.json und wendet es an. Dies wird häufig mit Bibliotheken wie Theme UI verwendet.

Aktualisieren Sie zunächst auf die neueste Version von Next.js: npm install next@latest. Aktualisieren Sie dann Ihre jsconfig.json oder tsconfig.json-Datei:

{
  "compilerOptions": {
    "jsxImportSource": "theme-ui"
  }
}

Emotion

Wir arbeiten daran, @emotion/babel-plugin zum Next.js Compiler zu portieren.

Aktualisieren Sie zunächst auf die neueste Version von Next.js: npm install next@latest. Aktualisieren Sie dann Ihre next.config.js-Datei:

 
module.exports = {
  compiler: {
    emotion: boolean | {
      // Standard ist true. Es wird deaktiviert, wenn der Build-Typ Produktion ist.
      sourceMap?: boolean,
      // Standard ist 'dev-only'.
      autoLabel?: 'never' | 'dev-only' | 'always',
      // Standard ist '[local]'.
      // Erlaubte Werte: `[local]` `[filename]` und `[dirname]`
      // Diese Option funktioniert nur, wenn autoLabel auf 'dev-only' oder 'always' gesetzt ist.
      // Sie ermöglicht es Ihnen, das Format der resultierenden Bezeichnung zu definieren.
      // Das Format wird über einen String definiert, bei dem Variable Teile in eckigen Klammern [] eingeschlossen sind.
      // Beispiel: labelFormat: "my-classname--[local]", wobei [local] durch den Namen der Variable ersetzt wird, der dem Ergebnis zugewiesen wird.
      labelFormat?: string,
      // Standard ist undefined.
      // Diese Option ermöglicht es Ihnen, dem Compiler mitzuteilen, welche Importe er betrachten soll,
      // um zu bestimmen, was er transformieren soll, sodass Sie, wenn Sie Emotions Exporte neu exportieren,
      // immer noch Transformationen verwenden können.
      importMap?: {
        [packageName: string]: {
          [exportName: string]: {
            canonicalImport?: [string, string],
            styledBaseImport?: [string, string],
          }
        }
      },
    },
  },
}

Minifikation

Next.js' SWC-Compiler wird seit Version 13 standardmäßig für die Minifikation verwendet. Dies ist 7-mal schneller als Terser.

Falls Terser aus irgendeinem Grund weiterhin benötigt wird, kann dies konfiguriert werden.

module.exports = {
  swcMinify: false,
}

Modul-Transpilation

Next.js kann Abhängigkeiten automatisch aus lokalen Paketen (wie Monorepos) oder externen Abhängigkeiten (node_modules) transpilieren und bündeln. Dies ersetzt das next-transpile-modules-Paket.

module.exports = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
}

Importierung modularisieren

Diese Option wurde in Next.js 13.5 durch optimizePackageImports ersetzt. Wir empfehlen ein Upgrade zur Nutzung der neuen Option, die keine manuelle Konfiguration von Import-Pfaden erfordert.

Experimentelle Funktionen

SWC-Trace-Profiling

Sie können SWCs interne Transformations-Traces im Chromium-Trace-Ereignisformat generieren.

module.exports = {
  experimental: {
    swcTraceProfiling: true,
  },
}

Sobald aktiviert, wird SWC eine Trace-Datei mit dem Namen swc-trace-profile-${timestamp}.json im .next/-Verzeichnis generieren. Chromiums Trace-Viewer (chrome://tracing/, https://ui.perfetto.dev/) oder kompatible Flamegraph-Viewer (https://www.speedscope.app/) können die generierten Traces laden und visualisieren.

SWC-Plugins (experimentell)

Sie können SWCs Transformation so konfigurieren, dass die experimentelle Plugin-Unterstützung in WebAssembly verwendet wird, um das Transformationsverhalten anzupassen.

module.exports = {
  experimental: {
    swcPlugins: [
      [
        'plugin',
        {
          ...pluginOptions,
        },
      ],
    ],
  },
}

swcPlugins akzeptiert ein Array von Tupeln zur Plugin-Konfiguration. Ein Tupel für das Plugin enthält den Pfad zum Plugin und ein Konfigurationsobjekt. Der Pfad zum Plugin kann ein npm-Modulpaketname oder ein absoluter Pfad zur .wasm-Binärdatei selbst sein.

Nicht unterstützte Funktionen

Wenn Ihre Anwendung eine .babelrc-Datei hat, wird Next.js automatisch auf Babel zurückgreifen, um einzelne Dateien zu transformieren. Dies gewährleistet die Abwärtskompatibilität mit bestehenden Anwendungen, die benutzerdefinierte Babel-Plugins nutzen.

Wenn Sie eine benutzerdefinierte Babel-Konfiguration verwenden, teilen Sie bitte Ihre Konfiguration mit. Wir arbeiten daran, so viele häufig verwendete Babel-Transformationen wie möglich zu portieren und Plugins in Zukunft zu unterstützen.

Versionshistorie