Babel

Next.js beinhaltet das next/babel-Preset für Ihre Anwendung, das alles Notwendige zur Kompilierung von React-Anwendungen und serverseitigem Code bereitstellt. Falls Sie die Standard-Babel-Konfigurationen erweitern möchten, ist dies ebenfalls möglich.

Hinzufügen von Presets und Plugins

Zunächst müssen Sie lediglich eine .babelrc-Datei (oder babel.config.js) im Stammverzeichnis Ihres Projekts definieren. Wenn eine solche Datei gefunden wird, gilt sie als einzige Wahrheit und muss daher 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, passen Sie das next/babel-Preset wie folgt an:

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

Weitere Informationen zu den verfügbaren Optionen für jede Konfiguration finden Sie in der Dokumentation von Babel.

Gut zu wissen:

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