Navigateurs pris en charge

Next.js prend en charge les navigateurs modernes sans configuration requise.

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

Browserslist

Si vous souhaitez cibler des navigateurs ou des fonctionnalités spécifiques, Next.js supporte la configuration Browserslist dans votre fichier package.json. Par défaut, Next.js utilise la configuration Browserslist suivante :

package.json

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

Polyfills

Nous injectons des polyfills couramment utilisés, notamment :

fetch() — Remplace : whatwg-fetch et unfetch.
URL — Remplace : le package url (API Node.js).
Object.assign() — Remplace : object-assign, object.assign et core-js/object/assign.

Si l'une de vos dépendances inclut ces polyfills, ils seront automatiquement éliminés de la build de production pour éviter les doublons.

De plus, pour réduire la taille du bundle, Next.js ne chargera ces polyfills que pour les navigateurs qui en ont besoin. La majorité du trafic web mondial ne téléchargera pas ces polyfills.

Polyfills personnalisés

Si votre propre code ou des dépendances npm externes nécessitent des fonctionnalités non supportées par vos navigateurs cibles (comme IE 11), vous devez ajouter vous-même les polyfills.

Dans ce cas, vous devriez ajouter une importation de haut niveau pour le polyfill spécifique dont vous avez besoin dans votre Custom <App> ou dans le composant individuel.

Fonctionnalités JavaScript

Next.js vous permet d'utiliser les dernières fonctionnalités JavaScript sans configuration. En plus des fonctionnalités ES6, Next.js supporte également :

Async/await (ES2017)
Propriétés Rest/Spread d'objets (ES2018)
import() dynamique (ES2020)
Chaînage optionnel (ES2020)
Opérateur de coalescence des nuls (ES2020)
Champs de classe et propriétés statiques (partie de la proposition stage 3)
et plus encore !

Polyfills côté serveur

En plus de fetch() côté client, Next.js fournit un polyfill pour fetch() dans l'environnement Node.js où il n'est pas encore disponible. Il utilise undici, la même implémentation que Node.js lui-même. Vous pouvez utiliser fetch() dans votre code serveur (comme getStaticProps/getServerSideProps) sans avoir besoin de polyfills comme isomorphic-unfetch ou node-fetch.

Fonctionnalités TypeScript

Next.js intègre le support de TypeScript. En savoir plus ici.

Personnalisation de la configuration Babel (avancé)

Vous pouvez personnaliser la configuration de Babel. En savoir plus ici.