Konfiguration von Babel in Next.js

Next.js fügt Ihrer Anwendung das next/babel-Preset hinzu, das alles enthält, was zum Kompilieren von React-Anwendungen und serverseitigem Code benötigt wird. Wenn Sie jedoch die Standard-Babel-Konfigurationen erweitern möchten, ist dies ebenfalls möglich.

Hinzufügen von Presets und Plugins

Zunächst müssen Sie nur eine .babelrc-Datei (oder babel.config.js) im Stammverzeichnis Ihres Projekts erstellen. Wenn eine solche Datei gefunden wird, gilt sie als einzige Wahrheit, und daher muss sie auch das definieren, was Next.js benötigt, nämlich das next/babel-Preset.

Hier ein Beispiel für eine .babelrc-Datei:

{
  "presets": ["next/babel"],
  "plugins": []
}

Sie können sich diese Datei ansehen, um mehr über die in next/babel enthaltenen Presets zu erfahren.

Um Presets/Plugins ohne Konfiguration hinzuzufügen, können Sie dies wie folgt tun:

{
  "presets": ["next/babel"],
  "plugins": ["@babel/plugin-proposal-do-expressions"]
}

Anpassen von Presets und Plugins

Um Presets/Plugins mit benutzerdefinierter Konfiguration hinzuzufügen, tun Sie dies beim next/babel-Preset wie folgt:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {},
        "transform-runtime": {},
        "styled-jsx": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}

Um mehr über die verfügbaren Optionen für jede Konfiguration zu erfahren, besuchen Sie die Dokumentation von Babel.

Wissenswert:

• Next.js verwendet die aktuelle Node.js-Version für serverseitige Kompilierungen.
• Die modules-Option bei "preset-env" sollte auf false belassen werden, da sonst das Code-Splitting von webpack deaktiviert wird.