Next.js 11 est disponible, elle améliore le temps de démarrage de 24 %

Et réduit de 40 % le temps de traitement des modifications

Next.js est un framework React pour le rendu côté serveur, mais il ne se limite pas à cela. Il est présenté par ses créateurs comme une chaîne d'outils à configuration zéro et à commande unique pour les applications React. Il fournit une structure commune qui vous permet de construire facilement une application frontale React, et gère de manière transparente le rendu côté serveur pour vous. La version 11 de Next.js a été publiée ce lundi avec de nouvelles fonctionnalités et quelques améliorations. Voyons ci-dessous quelques nouveautés de cette version.

Conformance

Même avec des outils performants et des optimisations automatiques dans les frameworks, on demande souvent aux propriétaires de sites et aux développeurs d'applications de devenir des experts en matière de qualité UX, comme les performances, la sécurité et l'accessibilité. À mesure que des fonctionnalités sont ajoutées et que les équipes s'agrandissent, les développeurs doivent penser différemment.

Grâce à son travail de création d'applications Web à grande échelle telles que Search et Maps, Google a prouvé que les frameworks peuvent jouer un rôle crucial dans le maintien de la qualité lorsque les équipes et les applications évoluent. En s'appuyant sur un système de valeurs par défaut et de protections solides, ils permettent aux développeurs de se concentrer davantage sur les fonctionnalités et les produits. Aujourd'hui, l'équipe des plateformes Web de Google a commencé à mettre en libre accès son système avec Conformance for Next.js.

Conformance est un système qui fournit des solutions et des règles soigneusement élaborées pour prendre en charge un chargement optimal, avec des ajouts à venir pour prendre en charge d'autres aspects de qualité comme la sécurité et l'accessibilité. Ces solutions libèrent de la nécessité de mémoriser toutes les dernières règles pour des performances de chargement optimales, tout en donnant la flexibilité de faire les bons choix pour les applications.


Chez Google, la conformité était une évolution. Les équipes s'appuyaient sur un petit groupe de mainteneurs très expérimentés qui effectuaient des revues de code approfondies, signalant les éléments qui avaient un impact sur la qualité et la maintenabilité des applications, bien au-delà des problèmes de correction. Pour adapter ce système à des équipes de développeurs d'applications en pleine croissance, un système de conformité a été développé pour codifier les meilleures pratiques de manière automatisée et applicable. Cela a permis de garantir un niveau élevé et constant de qualité des applications et de maintenabilité de la base de code, quel que soit le nombre de contributeurs au code.

En plus de nombreuses optimisations fondamentales soutenues par la recherche sur les performances, Next.js 11 prend en charge ESLint afin de faciliter la détection des problèmes spécifiques au framework pendant le développement et d'établir des directives pour l’équipe de développement afin de garantir les meilleures pratiques, même lorsque l’équipe évolue.

Pour commencer avec ESLint, on doit exécuter npx next lint après la mise à niveau vers Next.js 11. L'intégration d'ESLint fonctionne pour les applications Next.js nouvelles et existantes, fournissant un nouvel ensemble de règles pour aider les développeurs à créer de meilleures applications.

Amélioration des performances

Les responsables ont amélioré le temps de démarrage de 24 % et réduit de 40 % le temps de traitement des modifications grâce à React Fast Refresh. Vous avez bénéficié de ces améliorations de vitesse incroyables en maintenant Next.js à jour. Next.js 11 inclut une autre optimisation de Babel pour réduire davantage le temps de démarrage. Nous avons créé une toute nouvelle implémentation du chargeur Babel pour webpack, en optimisant le chargement et en ajoutant une couche de mise en cache de la configuration en mémoire. Dans la pratique, cela ne signifie aucun changement pour les développeurs, mais, au final, une expérience de développement plus rapide.

Optimisation des scripts

Le nouveau composant de script Next.js est une optimisation fondamentale qui permet aux développeurs de définir la priorité de chargement des scripts tiers afin de gagner du temps et d'améliorer les performances de chargement. Les sites Web ont souvent besoin de tiers pour des éléments tels que les analyses, les publicités, les...