Babel

Next.js fügt Ihrer App 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.

Presets und Plugins hinzufügen

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

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

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

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

Um Presets/Plugins ohne sie zu konfigurieren hinzuzufügen, können Sie dies so machen:

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

Presets und Plugins anpassen

Um Presets/Plugins mit benutzerdefinierter Konfiguration hinzuzufügen, gehen Sie wie folgt vor:

{
  "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 Babels Dokumentationsseite.

Hinweis:

• Next.js verwendet die aktuelle Node.js-Version für serverseitige Kompilierungen.
• Die modules-Option für "preset-env" sollte auf false gesetzt bleiben, da sonst die Webpack-Code-Aufteilung deaktiviert wird.