Explorer Next.js 11 : Quoi de neuf

Dans cet article, vous découvrirez toutes les nouvelles fonctionnalités ajoutées à Next.js dans la version 11.

L'équipe de Vercel a récemment présenté Next.js 11 lors de la conférence Next.js qui s'est tenue le 15 juin. Si vous lisez cet article et que vous ne savez pas ce qu'est Next.js, Next.js est un framework React qui vous offre la meilleure expérience de développeur avec toutes les fonctionnalités dont vous avez besoin pour la production : rendu, statique hybride, prise en charge de TypeScript, construction intelligente, prélecture d'itinéraire et plus encore, sans aucune configuration requise.

Vercel est vraiment engagé dans un Web ouvert et florissant. Avec Next.js 11, le framework est plus rapide et plus facile à utiliser, mais surtout, élève la barre de qualité de vos applications. La nouvelle version de Next.js a rendu la création Web en temps réel, collaborative et accessible à tous avec un navigateur Web.

Dans cet article, nous explorerons Next.js 11 et présenterons toutes les nouvelles fonctionnalités ajoutées. La 11e version comprend sept fonctionnalités en général, qui sont :

1. Performances améliorées
2. Optimisation du script (next/script)
3. Améliorations de l'image (next/image)[19659006]Conformité
4. Créer une migration d'application React (@next/codemod)
5. Support pour webpack 5
6. Next.js Live

Sans plus tarder, explorons.

Amélioré Performances

L'un de mes ajouts préférés à Next.js est l'amélioration des performances, et c'est un avantage passif pour les utilisateurs. Restez simplement à jour avec les versions de Next.js et vos chiffres s'amélioreront. Par exemple, depuis la version 10, Next.js rapporte un temps de démarrage jusqu'à 24 % plus rapide et un temps de traitement 40 % plus rapide en raison des modifications apportées par React Fast Refresh. Vos compétences en développement n'ont pas besoin de changer pour profiter de ces avancées de vitesse.

De plus, une mise à jour du chargeur Babel pour webpack optimise le chargement et ajoute une couche de mise en cache de configuration en mémoire. Il s'agit d'une autre amélioration qui profite aux performances sans que les développeurs aient à ajuster quoi que ce soit.

Pour utiliser cette fonctionnalité, vous devez maintenir votre Next.js à jour en exécutant la commande suivante :

npm i next@latest react @latest réagir-dom@latest

Script Optimization

Next.js a publié un nouveau type de composant appelé Script Component à des fins d'optimisation. Il permet aux développeurs de définir la priorité de chargement des scripts tiers pour gagner du temps et améliorer les performances de chargement.

Étant donné que les sites Web doivent parfois s'intégrer à des scripts tiers tels que des analyses, des publicités, etc., nous, les développeurs, avons souvent du mal à décider où pour placer les scripts dans notre application pour un chargement optimal et une exécution correcte.

Ainsi, avec next/scriptvous pouvez définir la priorité du script via la prop strategy tandis que Next.js les priorisera automatiquement pour améliorer les performances de chargement.

Le script Le composant est livré avec trois modes :

• 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.
• afterInteractive.  : Pour les scripts pouvant être récupérés et exécutés une fois la page interactive, tels que les gestionnaires de balises et les analyses.
• lazyOnLoad : Pour les scripts pouvant attendre un temps d'inactivité à charger, comme l'assistance par chat et les widgets de réseaux sociaux.

<Script
  src="votre adresse"
  stratégie="beforeInteractive" 
/>

Nous pouvons également exécuter le code après le chargement. Par exemple, vous pouvez attendre l'exécution du code jusqu'à ce qu'un utilisateur ait répondu au consentement.

<Script
 src={url}
 stratégie="beforeInteractive"
 onLoad={() => {
   
 }}
/>

Notez également que le l'expérience de chargement de script par défaut dans Next.js 11 est passée de préchargement et async à defer. Les scripts tiers sont souvent en concurrence avec des ressources de priorité plus élevée. Cela a été une tâche intimidante pour les développeurs de maintenir le séquençage approprié par rapport à ces ressources et autres scripts.

Les développeurs ont désormais une valeur par défaut améliorée pour des performances optimales en utilisant un composant de script avec une stratégie de chargement par défaut de afterInteractiveavec beforeInteractive comme une bonne alternative.

Lisez les RFC et challenges with preload de l'équipe Google Chrome pour en savoir plus sur les choix techniques derrière en changeant la valeur par défaut.

Améliorations de l'image

Dans Next.js version 11.0, de nouvelles fonctionnalités ont été introduites dans le composant next/imageréduisant le décalage de mise en page cumulatif et créant une expérience visuelle simple pour l'utilisateur final.

Détection automatique de la taille des images statiques

Jusqu'à présent, les accessoires de hauteur et de largeur étaient requis lors du rendu des images à l'aide du composant image. Ces accessoires permettent à Next.js d'identifier la taille de l'image et de restituer un espace réservé, évitant ainsi un changement de mise en page et une interface utilisateur désorganisée.

<Image
   alt="Ma photo"
   src="/david.png"
   largeur={700}
   height={475}
/>

Vous n'avez plus besoin de séparer vos accessoires de taille et de poids car Next.js 11 prend en charge import mots-clés pour image src pour définir automatiquement la largeur et la hauteur des images statiques.

import image from 'next/image'
import profile de '...profile/david.png'

export default fonction Profile() {
  return[19659040](
    
    
    <Image src={profile} alt="Photo de profil" /> 
  )
}

Espaces réservés d'image

En outre, le composant next/image de Next.js 11 prend désormais en charge un nouvel accessoire d'espace réservé flou qui définit la valeur sur flou sur les connexions Internet plus lentes. Cela permettra au composant next/image d'afficher des images floues et à faible résolution pendant le chargement de l'image initiale.

Ajoutez un placeholder="blur" à votre image à utiliser les espaces réservés flous.

<Image
  src={image}
  alt="Ma photo"
  placeholder="blur"
/>

Le composant image affichera l'image floue pendant quelques secondes avant que l'image initiale ne se charge enfin.

Next.js 11 prend également en charge flouter les images dynamiques à l'aide de l'accessoire personnalisé blurDataURLqui est fourni par votre backend dans votre balise Image. Vous pouvez générer la blurDataURL personnalisée à l'aide d'une application telle que blurha.sh sur le serveur.

<Image
  src="vos sources d'images"
  blurDataURL="l'url de votre image personnalisée"
  alt="My picture" placeholder="flou" 
/>

Conformité

Tout d'abord, regardons : quoi est la conformité ? Selon les équipes de la plate-forme Web Googlela conformité est un terme utilisé en interne chez Google. Il s'agit d'un système qui fournit des solutions soigneusement conçues pour prendre en charge une expérience utilisateur optimale.

De l'expérience de l'équipe de la plate-forme Web Google qui crée des applications à grande échelle (vous savez, comme Maps, Photos et Google Search), ils ont prouvé que les frameworks jouent un rôle essentiel dans le maintien de la qualité et des performances des applications. Lorsqu'un framework dispose d'un système fiable de paramètres et de sécurité, les développeurs peuvent se concentrer sur leur application et leurs produits, sur l'ajout de fonctionnalités et la mise à l'échelle.

L'équipe de la plate-forme Web de Google a commencé à explorer la conformité dans l'écosystème du framework JavaScript, actuellement en open source de leur système avec Conformance for Next.js.

Alors maintenant, Next.js intégrera de nombreuses meilleures pratiques de Conformance destinées à aider les développeurs en contrôlant les choses, comme les performances, la sécurité, l'accessibilité, etc. .—sans que le développeur n'ait à tout suivre.

Par exemple, Next.js prend désormais en charge ESLint prêt à l'emploi, ce qui vous permet de détecter les problèmes spécifiques à Next pendant le développement. Il applique et définit des directives pour votre équipe afin de garantir les meilleures pratiques tout au long du développement et même à mesure que vous évoluez.

L'intégration ESLint fonctionne pour les applications Next.js nouvelles et existantes. Pour utiliser ESLint, exécutez npx next lint après la mise à niveau vers Next.js 11.

Prise en charge de webpack 5

Next.js 10.2 a précédemment annoncé la prise en charge de webpack 5 sans configuration de webpack personnalisée dans next.config.js. À partir de la version 11, webpack 5 est désormais la valeur par défaut pour toutes les applications Next.js. Votre nouvelle application Next.js sera livrée avec toutes les optimisations et fonctionnalités de webpack 5. Cependant, si votre application précédente a une configuration personnalisée, je vous recommande de suivre cette mise à niveau pour la documentation de webpack 5.

Create React App Migration

L'équipe Vercel a également introduit un nouvel outil appelé @next/codemod qui convertit automatiquement les applications Create React App pour qu'elles soient compatibles Next.js.

La migration CRA est l'une de mes fonctionnalités préférées car il aide les développeurs à convertir les applications CRA en Next.js immédiatement. Il ajoute automatiquement un répertoire pages/ et déplace les importations CSS vers le répertoire approprié. Vous pouvez également adopter Next.js de manière incrémentielle tout en conservant les fonctionnalités du projet CRA existant.

Pour migrer votre précédent projet de création d'application, utilisez la commande ci-dessous :

npx @next/codemod cra-to-next

A noter que cette fonctionnalité est actuellement expérimentale.

Next.js Live

Next.js Live est définitivement l'une des fonctionnalités essentielles de Next.js 11. La mission de Vercel est pour rendre le développement plus agréable et plus inclusif. Ils ont introduit des technologies telles que ServiceWorker, WebAssembly et ES Modules pour fournir un environnement de développement collaboratif directement dans le navigateur.

Avec cette fonctionnalité Live, les développeurs peuvent collaborer immédiatement en partageant une URL sans étape de construction. N'est-ce pas incroyable? Cela signifie que vous pouvez effectuer une programmation et une édition par les pairs en temps réel dans le navigateur et obtenir des commentaires instantanément.

Notez que la fonctionnalité en direct fonctionne actuellement en accès anticipé.

Conclusion

J'espère que vous avez apprécié la lecture de cet article. . Je suis très enthousiasmé par les nouvelles et incroyables fonctionnalités de Next.js 11.

À partir de Conformance, un système qui fournit un environnement consciencieux pour prendre en charge une expérience utilisateur optimale, à l'amélioration des performances qui améliore le temps de démarrage ; avec d'autres fonctionnalités pour améliorer le chargement des images et des scripts, et la possibilité de coder en collaboration dans le navigateur avec la fonctionnalité Live. En effet, l'équipe Next.js a vraiment pour mission de créer la meilleure expérience de développeur.

J'aime ce que le L'équipe Vercel fait et la trajectoire sur laquelle elle emprunte Next.js.

Vous pouvez l'essayer ou mettre à niveau votre projet précédent vers la version 11, et donnez-moi votre avis dans la section commentaires.