Unterstützte Browser

Next.js unterstützt moderne Browser ohne zusätzliche Konfiguration.

Chrome 64+
Edge 79+
Firefox 67+
Opera 51+
Safari 12+

Browserslist

Falls Sie bestimmte Browser oder Funktionen gezielt ansprechen möchten, unterstützt Next.js die Browserslist-Konfiguration in Ihrer package.json-Datei. Next.js verwendet standardmäßig folgende Browserslist-Konfiguration:

package.json

{
  "browserslist": [
    "chrome 64",
    "edge 79",
    "firefox 67",
    "opera 51",
    "safari 12"
  ]
}

Polyfills

Wir fügen weit verbreitete Polyfills ein, darunter:

fetch() — Ersetzt: whatwg-fetch und unfetch.
URL — Ersetzt: das url-Paket (Node.js API).
Object.assign() — Ersetzt: object-assign, object.assign und core-js/object/assign.

Falls Ihre Abhängigkeiten diese Polyfills enthalten, werden sie automatisch aus dem Produktions-Build entfernt, um Duplikate zu vermeiden.

Zusätzlich lädt Next.js diese Polyfills nur für Browser, die sie benötigen, um die Bundle-Größe zu reduzieren. Der Großteil des globalen Web-Traffics lädt diese Polyfills nicht herunter.

Benutzerdefinierte Polyfills

Falls Ihr eigener Code oder externe npm-Abhängigkeiten Funktionen benötigen, die von Ihren Zielbrowsern (wie IE 11) nicht unterstützt werden, müssen Sie selbst Polyfills hinzufügen.

In diesem Fall sollten Sie einen Top-Level-Import für das spezifische Polyfill in Ihrer benutzerdefinierten <App> oder der jeweiligen Komponente hinzufügen.

JavaScript-Sprachfunktionen

Next.js ermöglicht die Verwendung der neuesten JavaScript-Funktionen ohne zusätzliche Konfiguration. Neben ES6-Funktionen unterstützt Next.js auch:

Async/await (ES2017)
Object Rest/Spread Properties (ES2018)
Dynamic import() (ES2020)
Optional Chaining (ES2020)
Nullish Coalescing (ES2020)
Class Fields und Static Properties (Teil der Stage-3-Proposal)
und mehr!

Serverseitige Polyfills

Zusätzlich zu fetch() auf der Client-Seite polyfillt Next.js fetch() in der Node.js-Umgebung, wo es noch nicht verfügbar ist. Es verwendet undici, die gleiche Implementierung, die auch Node.js selbst nutzt. Sie können fetch() in Ihrem Server-Code (wie getStaticProps/getServerSideProps) verwenden, ohne Polyfills wie isomorphic-unfetch oder node-fetch zu benötigen.

TypeScript-Funktionen

Next.js bietet integrierte TypeScript-Unterstützung. Mehr erfahren.

Anpassen der Babel-Konfiguration (Fortgeschritten)

Sie können die Babel-Konfiguration anpassen. Mehr erfahren.