Next.js 11

Comme nous l'avons annoncé lors de Next.js Conf, notre mission de créer la meilleure expérience développeur se poursuit avec Next.js 11, comprenant :

• Conformité : Un système fournissant des solutions soigneusement élaborées pour une expérience utilisateur optimale.
• Amélioration des performances : Optimisations supplémentaires pour réduire le temps de démarrage à froid afin que vous puissiez coder plus rapidement.
• next/script : Priorisation automatique du chargement des scripts tiers pour améliorer les performances.
• next/image : Réduction du décalage de mise en page et création d'une expérience visuelle plus fluide avec détection automatique des dimensions et support des placeholders flous.
• Webpack 5 : Maintenant activé par défaut pour toutes les applications Next.js, apportant ces avantages à tous les développeurs Next.js.
• Migration depuis Create React App (Expérimental) : Conversion automatique d'une application Create React App pour la rendre compatible avec Next.js.
• Next.js Live (Version Préliminaire) : Codez dans le navigateur, avec votre équipe, en temps réel.

Mettez à jour dès aujourd'hui en exécutant npm i next@latest react@latest react-dom@latest et consultez le guide de migration ci-dessous.

Conformité

Même avec d'excellents outils et des optimisations automatiques dans les frameworks, les propriétaires de sites et les développeurs d'applications sont souvent amenés à devenir des experts en qualité d'expérience utilisateur, comme les performances, la sécurité et l'accessibilité. À mesure que les fonctionnalités sont ajoutées et que les équipes grandissent, les développeurs doivent penser différemment.

À travers leur travail sur des applications web à grande échelle comme Search et Maps, Google a prouvé que les frameworks peuvent jouer un rôle crucial dans le maintien de la qualité à mesure que les équipes et les applications évoluent. En tirant parti d'un système de valeurs par défaut solides et de protections, ils permettent aux développeurs de se concentrer davantage sur les fonctionnalités et les produits.

Aujourd'hui, l'équipe Web Platforms de Google a commencé à ouvrir son système avec Conformance pour Next.js.

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

Avec de nombreuses optimisations fondamentales soutenues par la recherche sur les performances, Next.js 11 prend désormais en charge ESLint dès le départ pour faciliter la détection des problèmes spécifiques au framework pendant le développement et établir des directives pour votre équipe afin d'assurer les meilleures pratiques même à grande échelle.

Pour commencer avec ESLint, exécutez npx next lint après avoir mis à jour vers Next.js 11. L'intégration ESLint fonctionne pour les nouvelles et les anciennes applications Next.js, fournissant un nouvel ensemble de règles pour aider les développeurs à construire de meilleures applications.

$ npx next lint
Nous avons créé le fichier .eslintrc pour vous et inclus la configuration de base ESLint pour Next.js.
 
./pages/about.js
7:9  Avertissement : Ne pas inclure manuellement les feuilles de style. Voir : https://nextjs.org/docs/messages/no-css-tags.  @next/next/no-css-tags
10:7  Avertissement : Les scripts synchrones externes sont interdits. Voir : https://nextjs.org/docs/messages/no-sync-scripts.  @next/next/no-sync-scripts
 
./pages/index.js
4:10  Avertissement : N'utilisez pas la balise HTML <a> pour naviguer vers /about/. Utilisez plutôt Link de 'next/link'. Voir : https://nextjs.org/docs/messages/no-html-link-for-pages.  @next/next/no-html-link-for-pages
 
Besoin de désactiver certaines règles ESLint ? En savoir plus ici : https://nextjs.org/docs/pages/building-your-application/configuring/eslint#disabling-rules
 
✨  Terminé en 1.94s.

Apprenez-en plus sur Conformance pour les frameworks sur le blog de Google.

Amélioration des performances

Depuis Next.js 10, nous sommes obsédés par l'amélioration continue de l'expérience développeur de Next.js. Dans les versions 10.1 et 10.2, nous avons amélioré le temps de démarrage jusqu'à 24 % et réduit 40 % du temps de traitement pour les modifications grâce à React Fast Refresh. Vous bénéficiez de ces incroyables améliorations de vitesse simplement en gardant Next.js à jour.

Next.js 11 inclut une autre optimisation pour Babel afin de réduire encore le temps de démarrage. Nous avons créé une toute nouvelle implémentation du loader Babel pour webpack, optimisant le chargement et ajoutant une couche de cache de configuration en mémoire. En pratique, cela signifie aucun changement pour les développeurs mais se traduira finalement par une expérience de développement plus rapide.

Optimisation des scripts

Le nouveau composant Script de Next.js est une optimisation fondamentale qui 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.

Les sites web ont souvent besoin de tiers pour des éléments comme les analyses, les publicités, les widgets de support client et la gestion des consentements. Cependant, ces scripts ont tendance à peser sur les performances de chargement et peuvent nuire à l'expérience utilisateur. Les développeurs ont souvent du mal à décider où les placer dans une application pour un chargement optimal.

Avec next/script, vous pouvez définir la propriété strategy et Next.js les priorisera automatiquement 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 de bots et la gestion des consentements. Ces scripts sont injectés dans le HTML initial depuis le serveur et s'exécutent avant le JavaScript auto-bundle.
• 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, comme 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 de se charger pendant les temps d'inactivité, comme les widgets de chat et les réseaux sociaux.

<Script
  src={url}
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

Vous pouvez également exécuter du code après le chargement. Par exemple, vous pouvez attendre qu'un utilisateur ait répondu à un consentement avant d'exécuter du code :

<Script
  src={url} // gestion des consentements
  strategy="beforeInteractive"
  onLoad={() => {
    // Si chargé avec succès, vous pouvez charger d'autres scripts en séquence
  }}
/>

Nous avons également changé l'expérience de chargement des scripts par défaut dans Next.js 11 de preload et async à defer. Les scripts tiers entrent souvent en concurrence avec des ressources de priorité plus élevée, comme le CSS, les polices et les images. Maintenir le bon séquencement par rapport à ces ressources, ainsi qu'aux autres scripts, est une charge injuste pour les développeurs.

En fournissant un composant Script avec une stratégie de chargement par défaut afterInteractive, les développeurs ont maintenant de meilleures valeurs par défaut pour des performances optimales, avec la possibilité de choisir beforeInteractive si nécessaire.

Pour en savoir plus sur les choix techniques derrière ce changement, consultez le RFC et les défis avec preload de l'équipe Google Chrome.

Améliorations des images

Nous sommes ravis de partager deux des fonctionnalités les plus demandées par notre communauté pour le composant next/image, réduisant le Cumulative Layout Shift et créant une expérience visuelle plus fluide.

Détection automatique des dimensions (Images locales)

Utilisez le mot-clé import pour le src de l'image afin de définir automatiquement width et height pour les images statiques.

Par exemple, utiliser le composant Image intégré est maintenant encore plus simple :

import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // Lorsque vous importez l'image comme source, vous
    // n'avez pas besoin de définir `width` et `height`.
    <Image src={author} alt="Photo de l'auteur" />
  );
}

Placeholders d'images

next/image prend désormais en charge les placeholders flous pour faciliter la transition entre l'espace vide et l'image et réduire le temps de chargement perçu, en particulier pour les utilisateurs avec des connexions internet lentes.

Pour utiliser des placeholders flous, ajoutez placeholder="blur" à votre image.

<Image src={author} alt="Photo de l'auteur" placeholder="blur" />

Next.js prend également en charge le flou pour les images dynamiques en vous permettant de fournir une blurDataURL personnalisée, générée par votre backend. Par exemple, vous pouvez générer un blurha.sh sur le serveur.

<Image
  src="https://nextjs.org/static/blog/next-11/learn.png"
  blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
  alt="Photo de l'auteur"
  placeholder="blur"
/>

Webpack 5

Avec Next.js 10.2, nous avons étendu le déploiement de webpack 5 à toutes les applications sans configuration webpack personnalisée dans leur next.config.js. Aujourd'hui, nous faisons de webpack 5 la valeur par défaut pour toutes les applications Next.js, ce qui fournira une variété de fonctionnalités et d'améliorations.

Nous avons travaillé en étroite collaboration avec la communauté pour assurer une transition en douceur vers webpack 5, plus de 3 400 tests d'intégration Next.js existants s'exécutent sur chaque pull request avec webpack 5 activé.

Si votre application a une configuration webpack personnalisée, nous vous recommandons de suivre la documentation de mise à niveau pour webpack 5. Si vous rencontrez des problèmes, partagez vos retours avec nous.

Migration depuis Create React App

Au cours des six derniers mois, nous avons constaté une augmentation des applications migrant de Create React App vers Next.js pour tirer parti des nombreuses améliorations d'expérience développeur et de performances pour les utilisateurs finaux que Next.js offre.

Pour aider les développeurs à convertir leurs applications vers Next.js, nous avons 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 imports 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 tirant parti de cette nouvelle transformation, vous pouvez adopter Next.js de manière incrémentielle tout en conservant la fonctionnalité de l'application Create React App existante.

Pour commencer la migration de votre projet Create React App, utilisez la commande suivante :

npx @next/codemod cra-to-next

Cette fonctionnalité est actuellement expérimentale, partagez vos retours dans cette discussion.

Next.js Live (Version Préliminaire)

Next.js Live est une continuation de notre mission pour rendre le développement non seulement plus rapide et plus agréable, mais surtout plus inclusif pour toute l'organisation. En tirant parti de technologies de pointe comme ServiceWorker, WebAssembly et ES Modules, Next.js Live place tout le processus de développement dans le navigateur web. Cela ouvre des possibilités comme collaborer et partager instantanément avec une URL, sans étape de build. Pour les développeurs, cela signifie une boucle de feedback plus rapide, moins de temps d'attente pour les builds, et un codage pair et édition en temps réel dans le navigateur.

Pour en savoir plus sur Next.js Live et comment le coupler avec le moteur de collaboration en temps réel de Vercel, consultez la section Next.js Live de la documentation.

Guide de mise à niveau

Next.js 11 introduit quelques changements cassants qui ne devraient pas affecter la majorité des utilisateurs. Ces fonctionnalités héritées ont été maintenues de manière rétrocompatible pendant des années, certaines remontant jusqu'à v4.0.

Ces fonctionnalités ont été supprimées pour réduire la taille du bundle et assurer que la base de code reste maintenable pour l'avenir. Pour en savoir plus sur la mise à niveau de la version 10 à 11, consultez le guide de mise à niveau.

Avec Next.js 11, la version minimale de React a été mise à jour vers 17.0.2. Consultez le billet de blog React 17 pour plus de détails. Nous travaillons également en étroite collaboration avec l'équipe React alors qu'ils introduisent React 18. Next.js 11 utilise createRoot lorsque React 18 alpha est utilisé.

Communauté

Next.js est le résultat du travail combiné de plus de 1 600 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 dans les 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 : @kahy9, @ljosberinn, @leerob, @kettanaito, @thomasboyt, @hussainanjar, @styfle, @devknoll, @LiuuY, @timneutkens, @housseindjirdeh, @PepijnSenders, @janicklas-ralph, @payapula, @tmtk75, @ijjk, @hiramhuang, @daku10, @atcastle, @matamatanot, @pelhage, @Lukazovic, @Mzaien, @gleich, @geshan, @Munawwar, @ykzts, @vitalybaev, @mottox2, @vvo, @chrisneven, @turneand, @d3lm, @akellbl4, @sokra, @johnjago, @alicanyildirim, @sanathusk, @valse, @samrobbins85, @SamVerschueren, @ademilter, @ctjlewis, @brandondc741, @eltociear, @martpie, @kasipavankumar, @joecohens, @alexbrazier, @jamsinclair, @fabianishere, @rokinsky, @msidqi, @rubensdemelo, @Simply007, @bradlc, @SinimaWath, @rgabs, @darshkpatel, @sumanthratna, @shuding, @prophet1996, @Joonpark13, @tremby, @stefanprobst, @dopt, @rishabhpoddar, @aydinkn, @ErfanMirzapour, @tubbo, @frontendtony, @eric-burel, @iker-barriocanal, @eps1lon, @Gigiz, @mplis, @HaNdTriX, et @jigsawye.

Les fonctionnalités suivantes ont été mentionnées lors de Next.js Conf, mais ont été livrées plus tôt via les versions 10.1 et 10.2 :

• Optimisation automatique des polices web : Amélioration des performances en intégrant le CSS des polices.
• Rafraîchissement plus rapide : 100ms à 200ms plus rapide.
• Améliorations de next/image : Support Apple Silicon (M1), plus d'options de mise en page et de loaders.
• Intégration Next.js Commerce avec Shopify : Couche de données flexible pour les applications e-commerce composables. Next.js Commerce supporte actuellement Shopify, BigCommerce, Saleor, Swell et Vendure.