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.
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 | $ npx next lint We created the .eslintrc file for you and included the base Next.js ESLint configuration. ./pages/about.js 7:9 Warning: Do not include stylesheets manually. See: https://nextjs.org/docs/messages/no-css-tags. @next/next/no-css-tags 10:7 Warning: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts. @next/next/no-sync-scripts ./pages/index.js 4:10 Warning: Do not use the HTML <a> tag to navigate to /about/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages. @next/next/no-html-link-for-pages Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules Done in 1.94s. |
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 widgets de support client et la gestion des consentements. Cependant, ces scripts ont tendance à peser lourdement sur les performances de chargement et peuvent nuire à l'expérience de l'utilisateur. Les développeurs ont souvent du mal à décider où les placer dans une application pour un chargement optimal. Avec next/script, il est possible de définir la propriété de stratégie et Next.js les classera automatiquement par ordre de priorité pour améliorer les performances de chargement :
- beforeInteractive : pour les scripts critiques qui doivent être récupérés et exécutés avant que la page ne soit interactive, comme la détection des robots et la gestion du consentement. Ces scripts sont injectés dans le HTML initial depuis le serveur et sont exécutés avant que le JavaScript autonome ne soit exécuté ;
- afterInteractive (par défaut) : pour les scripts qui peuvent être récupérés et exécutés après que la page soit interactive, tels que les gestionnaires de balises et les analyses. Ces scripts sont injectés côté client et s'exécutent après l'hydratation ;
- lazyOnload pour les scripts qui peuvent attendre d'être chargés pendant les temps morts, tels que l'assistance par chat et les widgets de médias sociaux.
| Code : | Sélectionner tout |
1 2 3 4 | <Script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.map" strategy="beforeInteractive" // lazyOnload, afterInteractive /> |
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 | <Script
src={url} // consent mangagement
strategy="beforeInteractive"
onLoad={() => {
// If loaded successfully, then you can load other scripts in sequence
}}
/> |
Améliorations des images
Voici, ci-dessous, deux des fonctionnalités les plus demandées par la communauté pour le composant next/image, afin de réduire le décalage cumulatif de la mise en page et de créer une expérience visuelle plus fluide.
Détection automatique de la taille (images locales)
Utilisez le mot-clé import pour l'image src afin de définir automatiquement la largeur et la hauteur des images statiques. Par exemple, l'utilisation du composant Image intégré est désormais encore plus facile :
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 | import Image from 'next/image'
import author from '../public/me.png'
export default function Home() {
return (
// When importing the image as the source, you
// don't need to define `width` and `height`.
<Image src={author} alt="Picture of the author" />
)
} |
L'option next/image prend désormais en charge les caractères de remplissage flous afin de faciliter la transition entre l'espace vide et l'image et de réduire le temps de chargement perçu, en particulier pour les utilisateurs dont la connexion Internet est plus lente. Pour utiliser des placeholders flous, ajoutez placeholder="blur" à votre image.
| Code : | Sélectionner tout |
<Image src={author} alt="Picture of the author" placeholder="blur" />
| Code : | Sélectionner tout |
1 2 3 4 5 6 | <Image src="https://nextjs.org/static/images/learn.png" blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q==" alt="Picture of the author" placeholder="blur" /> |
Avec Next.js 10.2, le déploiement de webpack 5 a été étendu à toutes les applications sans configuration personnalisée dans leur .config.js. Aujourd'hui, webpack 5 est la version par défaut pour toutes les applications Next.js, ce qui apporte une variété de fonctionnalités et d'améliorations. Plus de 3 400 tests d'intégration Next.js existants sont exécutés sur chaque pull request avec webpack 5 activé. Si l'application développée a une configuration webpack personnalisée, il est recommandé de suivre la documentation de mise à niveau pour webpack 5.
Migration de l'ARC
Au cours des six derniers mois, les responsables ont constaté une augmentation du nombre d'applications migrant de Create React App vers Next.js pour tirer parti des nombreuses améliorations de l'expérience du développeur et des performances pour l'utilisateur final que Next.js apporte. Pour aider les développeurs à convertir leurs applications vers Next.js, il a été introduit un nouvel outil dans @next/codemod qui convertit automatiquement les applications Create React App pour les rendre compatibles avec Next.js.
La transformation ajoute automatiquement un répertoire pages/ et déplace les importations CSS au bon endroit. Elle activera également un mode de compatibilité Create React App dans Next.js qui garantit que certains modèles utilisés dans Create React App fonctionnent avec Next.js.
En exploitant la nouvelle transformation, vous pouvez adopter progressivement Next.js tout en conservant les fonctionnalités de l'application Create React App existante. Pour commencer à migrer votre projet Create React App, utilisez la commande suivante :
| Code : | Sélectionner tout |
npx @next/codemod cra-to-next
Et vous ?
Utilisez-vous Next.js ? Que pensez-vous des nouveautés de la version 11 ?Voir aussi :
Next.js 9.3 est disponible avec la prise en charge de la génération de sites statiques et une optimisation pour les pages 404 Next.js 8 est maintenant disponible, avec une réduction de l'utilisation de la mémoire au moment de la construction React : la version 16.8 de la bibliothèque JavaScript est disponible et embarque une version stable des Hooks État de JavaScript en 2019 : les développeurs aiment un peu plus React, Angular est en déclin, un groupe de développeurs pense que JS est « trop complexe »