En plus de son démarrage plus rapide, Next.js 11, la dernière version du framework d'application web de Vercel basé sur la bibliothèque JavaScript React, comporte d'autres améliorations de performances. L’éditeur a également livré un aperçu de Next.js Live, un serveur de développement basé sur un navigateur, destiné à favoriser la collaboration. « Le temps de démarrage de Next.js a été accéléré de 24%, et le temps de traitement des modifications a été réduit de 40% », a déclaré Vercel. De plus, un composant de script Next.js permet aux développeurs de définir la priorité de chargement des scripts tiers pour améliorer encore les performances.
Disponible en préversion, Next.js Live combine un nouveau moteur de serveur de développement pour Next.js avec la plateforme de collaboration Vercel afin de permettre aux équipes de partager et d'éditer à partir de n'importe où. Si Next.js pouvait déjà fonctionner n'importe où via Node.js, Next.js Live ajoute une couche de collaboration basée sur le cloud. Les applications Next.js statiques et dynamiques sont prises en charge. ServiceWorker, WebAssembly et ES Modules sont exploités pour prendre en charge la collaboration à distance. Next.js Live fonctionne également hors ligne, ce qui évite de recourir à des machines virtuelles à distance.
Create React App, fonction expérimentale de migration
Parmi les autres fonctionnalités de Next.js 11, on peut citer un feedback en temps réel, qui tire parti de Webpack HMR (Hot Module Replacement) sans aucune configuration. Le navigateur reflète les changements dès qu'un fichier est enregistré. L'état est préservé au fur et à mesure des modifications, grâce à la prise en charge de Fast Refresh. Le « bundler de modules » Webpack 5 est désormais activé par défaut pour toutes les applications Next.js.
On trouve une fonction expérimentale de migration Create React App qui convertit la fonction Create React App de façon à la rendre compatible avec Next.js. La version 11 apporte aussi des améliorations sur les images : les développeurs peuvent remplacer la balise d'image HTML par le composant d'image Next.js, afin d'optimiser l'affichage pour chaque fenêtre de l'appareil sur lequel l'image est diffusée.
Le chargement optimal est pris en charge : les développeurs n’ont pas à mémoriser des règles compliquées pour les performances de chargement. Par ailleurs, l'amélioration des polices est automatisée : le CSS des polices personnalisées est désormais automatiquement intégré au moment de la construction afin d’éviter les allers-retours avec les déclarations de polices. Une balise de pré-connexion dans Next.js établit une connexion avec les fichiers de polices sous-jacents, pour plus de rapidité.
Dévoilé le 15 juin, Next.js 11 arrive après Next.js 10, livré en octobre dernier, et quelques versions intermédiaires ponctuelles. Des instructions de mise à jour et un guide de migration vers la version 11 sont disponibles sur nextjs.org.