BackRetour au blog

Next.js 11.1

Next.js 11.1 introduit un correctif de sécurité important, le support des modules ES, des améliorations de performances, des outils basés sur Rust, un chargement de données 2x plus rapide lors du pré-rendu, et bien plus encore !

Nous améliorons les performances de build à tous les niveaux avec Next.js 11.1, qui inclut :

Mettez à jour dès maintenant en exécutant npm i next@latest.

Correctif de sécurité

L'équipe Next.js collabore avec des chercheurs en sécurité et des auditeurs pour prévenir les vulnérabilités. Nous remercions Gabriel Benmergui de Robinhood pour son investigation et la découverte d'une redirection ouverte avec pages/_error.js ainsi que sa divulgation responsable.

Le problème signalé ne nuisait pas directement aux utilisateurs, mais il pouvait permettre des attaques de phishing en redirigeant vers un domaine malveillant depuis un domaine de confiance. Nous avons appliqué un correctif dans Next.js 11.1 pour empêcher cette redirection ouverte, ainsi que des tests de régression de sécurité.

Pour plus de détails, consultez le CVE public. Nous recommandons de mettre à jour vers la dernière version de Next.js pour améliorer la sécurité globale de votre application. Pour toute divulgation responsable future, contactez-nous à security@vercel.com.

Remarque : Les applications Next.js hébergées sur Vercel ne sont pas affectées par cette vulnérabilité (et donc aucune action n'est nécessaire pour vos applications Next.js fonctionnant sur Vercel).

Support des modules ES

Nous travaillons sur un support étendu des modules ES dans Next.js, à la fois comme modules d'entrée et comme cible de sortie. À partir de Next.js 11.1, vous pouvez désormais importer des packages npm utilisant les modules ES (par exemple "type": "module" dans leur package.json) avec un flag expérimental.

next.config.js
module.exports = {
  // Préférer le chargement des modules ES plutôt que CommonJS
  experimental: { esmExternals: true },
};

Le support des modules ES inclut une compatibilité ascendante pour conserver le comportement d'import précédent de CommonJS. Dans Next.js 12, esmExternals: true deviendra la valeur par défaut. Nous vous recommandons d'essayer cette nouvelle option et de donner votre avis sur GitHub Discussions si vous avez des suggestions d'amélioration.

Adoption de SWC basé sur Rust

Nous travaillons sur l'intégration de SWC, un compilateur JavaScript et TypeScript ultra-rapide écrit en Rust, qui remplacera deux chaînes d'outils utilisées dans Next.js : Babel pour les fichiers individuels et Terser pour la minification des bundles de sortie.

Dans le cadre du remplacement de Babel par SWC, nous portons toutes les transformations de code personnalisées utilisées par Next.js vers des transformations SWC écrites en Rust pour maximiser les performances. Par exemple, l'élimination du code inutilisé dans getStaticProps, getStaticPaths et getServerSideProps.

Pour remplacer Terser, nous veillons à ce que le minificateur SWC produise un résultat similaire à Terser tout en améliorant considérablement les performances et la parallélisation de la minification.

Lors de tests préliminaires, les transformations de code précédentes utilisant Babel sont passées de ~500ms à ~10ms et la minification de code avec Terser est passée de ~250ms à ~30ms avec SWC. Globalement, cela a permis des builds deux fois plus rapides.

Nous sommes ravis d'annoncer que DongYoon Kang, le créateur de SWC, et Maia Teegarden, contributrice à Parcel, ont rejoint l'équipe Next.js chez Vercel pour améliorer les performances de next dev et next build. Nous partagerons plus de résultats sur notre adoption de SWC dans la prochaine version lorsqu'elle sera stabilisée.

Améliorations des performances

Builds & Chargement de données

Lors de l'utilisation de next build et de nombreuses requêtes HTTP, nous avons amélioré les performances d'environ 2x en moyenne. Par exemple, si vous utilisez getStaticProps et getStaticPaths pour récupérer du contenu depuis un CMS Headless, vous devriez constater des builds nettement plus rapides.

Next.js polyfill automatiquement node-fetch et active désormais par défaut HTTP Keep-Alive. Selon des benchmarks externes, cela devrait rendre le pré-rendu ~2x plus rapide.

Pour désactiver HTTP Keep-Alive pour certains appels fetch(), vous pouvez ajouter l'option agent :

import { Agent } from 'https';
const url = '<https://example.com>';
const agent = new Agent({ keepAlive: false });
fetch(url, { agent });

Pour remplacer tous les appels fetch() globalement, vous pouvez utiliser next.config.js :

next.config.js
module.exports = {
  httpAgentOptions: {
    keepAlive: false,
  },
};

Source Maps

L'inclusion des source maps navigateur dans les applications Next.js a désormais un coût de performance environ 70 % moindre et une utilisation mémoire environ 67 % moindre grâce aux optimisations du traitement des assets et des source maps par webpack.

Cela n'affecte que les applications Next.js avec productionBrowserSourceMaps: true dans leur fichier next.config.js. Avec Next.js 11.1, les temps de build n'augmentent que de 11 % lorsque les source maps sont activées.

Nous avons également collaboré avec Sentry pour améliorer les performances de l'upload des source maps avec le plugin Sentry pour Next.js.

Améliorations d'ESLint

Dans Next.js 11, nous avons introduit le support intégré d'ESLint via next lint. Depuis sa sortie initiale, nous avons continué à ajouter des règles aidant les développeurs à corriger des erreurs courantes dans leurs applications.

Règles d'accessibilité par défaut

De meilleures règles d'accessibilité sont désormais incluses par défaut, empêchant les problèmes avec les propriétés ARIA qui ne correspondent pas entre elles et l'utilisation d'attributs ARIA inexistants. Ces règles généreront des avertissements par défaut.

Un grand merci au contributeur de la communauté JeffersonBledsoe pour l'ajout de ces règles.

Fautes de frappe courantes

La détection des fautes de frappe courantes dans getStaticProps, getStaticPaths et getServerSideProps générera désormais des avertissements par défaut. Cela aidera dans les cas où une petite faute de frappe empêche le chargement des données d'être appelé. Par exemple, getstaticprops ou getStaticprops afficheront un avertissement.

Un grand merci au contributeur de la communauté kaykdm pour la création de cette règle.

Améliorations de next/image

Nous avons recueilli les retours de la communauté sur next/image et l'optimisation d'images intégrée et sommes ravis de partager plusieurs améliorations concernant les performances, l'expérience développeur et l'expérience utilisateur.

Optimisation d'images

Par défaut, Next.js utilise WebAssembly pour effectuer l'optimisation d'images, ce qui réduit le temps d'installation du package Next.js en étant significativement plus léger et sans étape post-installation. Avec Next.js 11.1, vous pouvez optionnellement installer sharp qui optimise le temps de génération des images non mises en cache au détriment d'une installation plus lente.

L'optimiseur d'images basé sur WebAssembly a été mis à jour pour supporter les puces ARM comme Apple M1 avec Node.js 16.

L'optimiseur d'images intégré détecte désormais automatiquement le type de contenu des images externes en fonction du corps de la réponse. Cela permet à Next.js d'optimiser les images hébergées sur AWS S3 lorsque l'en-tête de réponse est Content-Type: application/octet-stream.

Génération différée des placeholders flous en développement

Pendant next dev, les imports d'images statiques avec placeholder="blur" sont désormais générés de manière différée, améliorant le temps de démarrage du serveur de développement pour les applications avec de nombreux imports d'images statiques :

pages/index.js
import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // Le placeholder pour cette image est généré de manière différée en développement
    <Image src={author} alt="Photo de l'auteur" placeholder="blur" />
  );
}

Autres améliorations d'images

  • Les images déjà chargées ne sont plus chargées de manière différée : Lorsqu'une image a déjà été chargée sur une page, soit via la navigation client soit en la chargeant à un autre endroit de la page, Next.js sautera automatiquement le chargement différé pour éviter un flash rapide avant d'afficher l'image.
  • Support des chargeurs d'images personnalisés avec next export : next/image supporte désormais l'utilisation de next export avec n'importe quel service tiers d'optimisation d'images. Vous pouvez configurer images.loader: "custom" dans next.config.js lorsque vous prévoyez de fournir la prop loader personnalisée à next/image.
  • Nouvel événement pour le chargement complet des images : Suite aux retours utilisateurs, nous avons ajouté une nouvelle propriété onLoadingComplete à next/image. Cela permet d'enregistrer un callback invoqué une fois l'image entièrement chargée.
  • Configuration de la durée de vie (TTL) par défaut du cache d'images : Vous pouvez désormais configurer images.minimumCacheTTL dans next.config.js pour modifier la TTL par défaut des images optimisées. Lorsque possible, nous recommandons d'utiliser les imports d'images static, car ceux-ci utilisent automatiquement la TTL maximale puisque le hash du contenu de l'image est dans l'URL.

Communauté

Next.js est le résultat du travail combiné de plus de 1 700 développeurs individuels, de partenaires industriels comme Google et Facebook, et de notre équipe principale.

Nous sommes fiers de voir cette communauté continuer à grandir. Rien que ces six derniers mois, nous avons constaté une augmentation de 50 % des téléchargements de Next.js sur NPM, passant de 4,1M à 6,2M, et le nombre de pages d'accueil utilisant Next.js dans le top 10 000 Alexa a augmenté de 50 %.

Cette version a été rendue possible grâce aux contributions de : @abotsi, @adam-cowley, @afbarbaro, @akellbl4, @AndreVarandas, @andys-github, @angeloashmore, @apuyou, @arturmuller, @AryanBeezadhur, @atcastle, @borekb, @brandonchinn178, @breyed, @brijendravarma, @ctbarna, @ctjlewis, @darshkpatel, @delbaoliveira, @destruc7i0n, @devknoll, @enesakar, @enzoferey, @euess, @fabb, @gnbaron, @hiro0218, @housseindjirdeh, @huozhi, @ijjk, @JacobLey, @jameshoward, @jamsinclair, @janicklas-ralph, @jarvelov, @javivelasco, @jaybekster, @JeffersonBledsoe, @jflayhart, @johnrackles, @jviide, @karlsander, @kasipavankumar, @kaykdm, @kdy1, @kylemh, @leerob, @LetItRock, @lsndr, @lucleray, @m-abdelwahab, @mandarons, @markkaylor, @mastoj, @michalbundyra, @michielvangendt, @Munawwar, @mvasilkov, @NickCrews, @NickKelly1, @noahweingand, @noreiller, @nyedidikeke, @omasher, @orta, @pa-rang, @padmaia, @papaponmx, @PaulvdDool, @petermekhaeil, @phocks, @pranavp10, @qwertyforce, @raon0211, @reod, @rishabhpoddar, @roim, @Ryz0nd, @sa3dany, @sachinraja, @samrobbins85, @schoenwaldnils, @schultzp2020, @sedlukha, @sergioalvz, @shibe23, @smitssjors, @sohamsshah, @sokra, @stefanprobst, @stovmascript, @stuymedova, @styfle, @tanys123, @ThangHuuVu, @theostrahlen, @thomasmarshall, @tigger9flow, @timneutkens, @Timvdv, @tmcgann, @tomchen, @UniqueNL, @Vadorequest, @vitalybaev, @yunger7, @zackdotcomputer, @zeekrey