BackRetour au blog

Next.js 10

Next.js 10 introduit l'Optimisation d'Image Intégrée, le Routage Internationalisé, les Analytiques Next.js, le Support de React 17, et bien plus encore !

Nous sommes ravis de vous présenter Next.js 10, qui inclut :

Composant Image Intégré et Optimisation Automatique des Images

Notre objectif avec Next.js est d'améliorer deux choses : l'Expérience Développeur et l'Expérience Utilisateur.

Cette année, nous avons déjà investi massivement dans l'Expérience Développeur et l'amélioration des performances pour toutes les applications Next.js. Nous nous sommes concentrés sur la réduction de la quantité de JavaScript que le navigateur doit charger.

Nous avons introduit plus de 20 nouvelles fonctionnalités qui améliorent les performances et l'expérience développeur. Dans le même temps, la taille du cœur de Next.js a été réduite de 16%.

En janvier, nous avons introduit une nouvelle stratégie de découpage de code JavaScript de premier plan en collaboration avec l'équipe Google Chrome.

Par exemple, Barnebys a constaté une réduction de 23% de la taille de l'application, et Sumup a vu une réduction de 70% de la taille de leur plus gros bundle JavaScript. Ces améliorations ont été obtenues sans modifier aucun code dans leurs applications Next.js.

Les entreprises ont adopté cette nouvelle stratégie automatiquement en mettant simplement à jour Next.js vers la dernière version.

Les Images sur le Web

Bien que notre concentration sur la réduction de la quantité de JavaScript que le navigateur doit charger ait porté ses fruits, le web n'est pas seulement du JavaScript : c'est aussi du balisage et des images.

Les images représentent 50% du total des octets sur les pages web.

Les images ont un grand impact sur le Largest Contentful Paint car elles sont souvent l'élément visible le plus grand lorsqu'une page est chargée. Le Largest Contentful Paint est un Core Web Vital que Google utilisera dans son classement de recherche très bientôt.

La moitié de toutes les images pèsent plus d'un mégaoctet, ce qui signifie qu'elles ne sont pas optimisées pour être affichées sur le web.

Aujourd'hui, les utilisateurs naviguent sur le web avec leurs téléphones, tablettes et ordinateurs portables, mais les images sont toujours conçues comme une solution unique. Par exemple : les sites chargent une image de 2000 par 2000 pixels, mais les téléphones ne l'affichent qu'en 100 par 100 pixels.

De plus, 30% des images sur les pages web sont en dehors de la fenêtre d'affichage initiale, ce qui signifie que le navigateur charge des images que l'utilisateur ne voit pas avant de faire défiler la page.

Les images n'ont souvent pas de propriétés width et height, ce qui les fait sauter lorsque la page est chargée. Cela nuit au Core Web Vital Cumulative Layout Shift.

99,7% des images sur les sites web n'utilisent pas de formats d'image modernes comme WebP.

Pour utiliser des images sur les pages web de manière performante, de nombreux aspects doivent être pris en compte : taille, poids, chargement différé et formats d'image modernes.

Les développeurs doivent configurer des outils de construction complexes pour optimiser les images, mais ces outils ne couvrent généralement pas les images soumises par les utilisateurs provenant d'une source de données externe, ce qui rend impossible l'optimisation de toutes les images.

Cette tâche de développement impossible conduit inévitablement à une expérience utilisateur frustrante.

Composant Image Next.js

Nous sommes ravis d'annoncer notre solution pour des images performantes sur le web : le Composant Image Next.js et l'Optimisation Automatique des Images.

À son niveau le plus basique, le Composant Image Next.js est simplement un remplacement direct de l'élément HTML <img>, évolué pour le web moderne.

<img
  src="/profile-picture.jpg"
  width="400"
  height="400"
  alt="Photo de profil"
/>
import Image from 'next/image';
<Image
  src="/profile-picture.jpg"
  width="400"
  height="400"
  alt="Photo de profil"
/>;

L'équipe Google Chrome a aidé à créer ce Composant React pour améliorer les performances des pages en faisant des bonnes pratiques la norme par défaut.

Lorsque vous utilisez le composant next/image, les images sont automatiquement chargées de manière différée, ce qui signifie qu'elles ne sont rendues que lorsque l'utilisateur est sur le point de voir l'image. Cela empêche le chargement de ces 30% d'images en dehors de la fenêtre d'affichage initiale.

Les dimensions des images sont imposées, permettant aux navigateurs de rendre immédiatement l'espace nécessaire pour l'image au lieu de la faire apparaître brusquement lors du chargement, évitant ainsi le décalage de mise en page.

Alors que width et height sur l'élément HTML <img> peuvent causer des problèmes avec les mises en page responsives, ce n'est pas le cas avec next/image. Lorsque vous utilisez next/image, l'image est automatiquement rendue responsive en fonction du rapport d'aspect fourni par width et height.

Les développeurs peuvent marquer les images qui sont dans la fenêtre d'affichage initiale, permettant à Next.js de précharger automatiquement ces images. Le préchargement des images dans la fenêtre d'affichage initiale a montré des améliorations du Largest Contentful Paint allant jusqu'à 50%.

Optimisation Automatique des Images

Même avec ces améliorations par rapport à l'élément HTML <img>, il reste un problème majeur. L'image de 2000 par 2000 pixels est envoyée aux téléphones qui affichent une image plus petite.

Avec Next.js 10, nous résolvons également ce problème. Le composant next/image générera automatiquement des tailles plus petites grâce à l'Optimisation d'Image Intégrée.

L'Optimisation d'Image Intégrée sert automatiquement les images dans des formats modernes comme WebP, qui est environ 30% plus petit que JPEG, si le navigateur le supporte. Cela permet également à Next.js d'adopter automatiquement les formats d'image futurs et de les servir aux navigateurs qui les supportent.

L'Optimisation des Images fonctionne avec n'importe quelle source d'image. Même si les images proviennent d'une source de données externe, comme un CMS, elles sont optimisées.

Au lieu d'optimiser les images au moment de la construction, Next.js 10 optimise les images à la demande, lorsque les utilisateurs les demandent. Contrairement aux générateurs de sites statiques et aux solutions purement statiques, vos temps de construction n'augmentent pas, que vous livriez 10 images ou 10 millions d'images.

Conclusion

Le nouveau composant next/image et l'Optimisation Automatique des Images sont de puissantes nouvelles primitives qui amélioreront considérablement l'expérience utilisateur.

Le composant next/image gère le chargement différé automatique, le préchargement des images critiques, le dimensionnement correct sur tous les appareils et supporte automatiquement les formats modernes. Ces fonctionnalités fonctionnent avec des images provenant de n'importe quelle source.

Nous avons hâte de voir à quel point votre expérience utilisateur devient plus rapide avec ces nouvelles primitives.

Pour plus de détails, consultez la documentation sur le Composant Image Next.js et l'Optimisation Automatique des Images.

Routage Internationalisé

Cette année, plusieurs entreprises et membres de la communauté ont aidé notre équipe à comprendre à quel point l'internationalisation est importante.

Par exemple, nous avons appris que 72% des consommateurs sont plus susceptibles de rester sur votre site s'il est traduit et 55% des consommateurs ont déclaré qu'ils n'achètent que sur des sites e-commerce dans leur langue maternelle.

Si vous prévoyez d'aller sur le marché dans un autre pays, l'internationalisation de votre projet est essentielle pour réussir.

L'internationalisation d'un projet repose sur deux piliers principaux : les Traductions et le Routage.

De nombreuses bibliothèques React préparent les applications à être traduites, mais la plupart s'attendent à ce que vous gériez le routage manuellement, et ne fonctionnent généralement qu'avec une seule stratégie de rendu.

C'est pourquoi, dans le cadre de Next.js 10, nous publions un support intégré pour le routage internationalisé et la détection de langue.

Ce support intégré pour le routage internationalisé prend en charge la stratégie hybride de Next.js, vous permettant de choisir entre la Génération Statique ou le Rendu côté Serveur page par page.

Next.js 10 supporte les deux stratégies de routage les plus courantes : le routage par sous-chemin et le routage par domaine.

Pour les deux stratégies, vous commencez par configurer les locales dans la configuration Next.js.

next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'nl'],
    defaultLocale: 'en',
  },
};

Les locales sont des Identifiants de Locale UTS, un format standardisé pour définir les locales.

Généralement, un Identifiant de Locale est composé d'une langue, d'une région et d'un script séparés par un tiret : langue-région-script. La région et le script sont optionnels. Un exemple :

  • en-US - Anglais tel que parlé aux États-Unis
  • nl-NL - Néerlandais tel que parlé aux Pays-Bas
  • nl - Néerlandais, sans région spécifique

Une fois vos locales configurées, vous pouvez choisir le routage par sous-chemin ou par domaine.

Routage par sous-chemin

Le routage par sous-chemin place la locale dans l'URL. Cela permet à toutes les langues de vivre sur un seul domaine.

Par exemple, vous pouvez insérer la locale dans l'URL comme /nl-nl/blog et /en/blog.

Routage par domaine

Le routage par domaine vous permet de mapper une locale à un domaine de premier niveau. Par exemple, example.nl peut être mappé à la locale nl et example.com peut être mappé à la locale en.

Le routage par domaine nécessite une configuration supplémentaire pour savoir comment router les domaines :

next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'nl'],
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en',
      },
      {
        domain: 'example.nl',
        defaultLocale: 'nl',
      },
    ],
  },
};

Détection de Langue

Next.js 10 a une détection de langue intégrée sur la route / basée sur l'en-tête Accept-Language, que tous les navigateurs modernes supportent. Les locales configurées seront comparées à l'en-tête Accept-Language puis redirigées selon la stratégie configurée.

Optimisation pour les Moteurs de Recherche

Comme Next.js connaît la langue de la page visitée par l'utilisateur, il ajoutera automatiquement l'attribut lang à la balise <html>.

Next.js ne connaît pas les variantes d'une page, c'est donc à vous d'ajouter les balises meta hreflang en utilisant next/head. Vous pouvez en apprendre plus sur hreflang dans la documentation Google Webmasters.

L'avenir de l'internationalisation dans Next.js

Le Routage Internationalisé est la première d'une série de fonctionnalités qui faciliteront l'internationalisation et la localisation de votre projet. Le Routage Internationalisé permet l'intégration avec la majorité des bibliothèques d'internationalisation React.

Pour en savoir plus sur le Routage Internationalisé, consultez la documentation sur le Routage Internationalisé.

Next.js Speed Insights

Chez Vercel, nous savons que vous ne pouvez pas corriger ce que vous ne pouvez pas mesurer.

Vos visiteurs sont de plus en plus sensibles à la performance des sites. Plus de 50% d'entre eux abandonneront votre site web s'il prend plus de 3 secondes à charger. Si vous êtes dans l'e-commerce, beaucoup ont constaté qu'améliorer votre temps de chargement de 1/10e de seconde entraînait une augmentation de 1% des conversions.

Parce que la performance est si critique pour votre succès, nous sommes fiers de publier Next.js Speed Insights. La solution pour suivre les métriques de performance réelles et réinjecter ces insights dans votre flux de développement.

Avec Next.js Speed Insights :

Au lieu de mesurer une fois, vous mesurerez maintenant en continu.

Au lieu de mesurer sur votre appareil de développement, les mesures viendront des appareils réels que vos visiteurs utilisent.

Next.js Speed Insights consiste à se concentrer sur l'ensemble du tableau, à comprendre profondément votre audience et comment votre application performe pour vos utilisateurs.

Nous sommes si déterminés à collecter des données réelles parce que les causes des mauvaises performances ne sont pas toujours les plus évidentes. Les régressions de performance peuvent résulter de divers endroits - scripts et feuilles de style tiers, ou polices, images et vidéos propriétaires qui sont surdimensionnées ou lentes.

Core Web Vitals

Google, en collaboration avec le Web Performance Working Group, a établi un ensemble de métriques pour mesurer précisément l'expérience de performance perçue par les utilisateurs sur votre site web : les Web Vitals. Les Web Vitals sont des indicateurs qui suivent la vitesse de chargement perçue, la réactivité et la stabilité visuelle de votre site web — trois éléments essentiels pour la santé globale de votre site !

La vitesse de chargement perçue peut être mesurée par le Largest Contentful Paint (LCP), c'est-à-dire le moment où tout le contenu de la page est affiché. Par exemple, lorsque j'ouvre un lien pour acheter une paire de baskets, le temps qui s'écoule avant que je voie les baskets, leur prix et le bouton "Ajouter au panier" correspond au LCP.

La réactivité de la page peut être mesurée par le First Input Delay (FID), qui évalue combien de temps vos utilisateurs doivent attendre pour voir la réaction à leur première interaction avec la page. Par exemple, le délai entre mon clic sur "Ajouter au panier" et l'incrémentation du nombre d'articles dans mon panier correspond au FID.

Enfin, la stabilité visuelle peut être mesurée par le Cumulative Layout Shift (CLS), c'est-à-dire le déplacement des éléments après leur affichage pour l'utilisateur. Par exemple, nous avons tous connu la frustration de cliquer sur un bouton qui a bougé parce qu'une image s'est chargée en retard — c'est ce qu'on appelle un layout shift.

La mesure continue et le respect de ces Web Vitals pour vos utilisateurs réels sont cruciaux. C'est le seul moyen de savoir réellement comment votre site performe pour vos utilisateurs. Les performances de votre site peuvent varier considérablement en fonction de l'appareil de l'utilisateur, de ses conditions réseau ou de la façon dont il interagit avec la page. Les sites qui chargent du contenu personnalisé ou des publicités peuvent également connaître des performances très différentes d'un utilisateur à l'autre.

Un test simulé ne peut pas capturer ces signaux importants.

Next.js Speed Insights vous permet de capturer des données réelles, plutôt que des benchmarks synthétiques. Il offre un flux continu de mesures au lieu de s'appuyer sur des tests ponctuels, en l'intégrant à votre flux de travail de développement.

Next.js Speed Insights vous permet de capturer des données réelles, plutôt que des benchmarks synthétiques. Il offre un flux continu de mesures au lieu de s'appuyer sur des tests ponctuels, en l'intégrant à votre flux de travail de développement.

Rendez-vous sur nextjs.org/analytics pour découvrir comment l'activer dès maintenant dans votre application.

Next.js Commerce

Le commerce électronique est l'une des utilisations les plus importantes du web. Les nouvelles fonctionnalités de Next.js 10 sont des outils puissants pour le e-commerce.

C'est pourquoi aujourd'hui, en collaboration avec BigCommerce, nous avons lancé Next.js Commerce, le kit de démarrage React tout-en-un pour les sites e-commerce. En quelques clics, les développeurs Next.js peuvent le cloner, le déployer et le personnaliser entièrement. Commencez dès maintenant sur nextjs.org/commerce.

Support de React 17

React 17 n'a apporté aucun changement cassant pour Next.js, mais certaines modifications de maintenance étaient nécessaires, comme la mise à jour des dépendances peer. La nouvelle transformation JSX est automatiquement activée lorsque React 17 est utilisé, aucune modification de configuration n'est nécessaire.

Pour commencer à utiliser React 17, il vous suffit de mettre à jour Next.js et React :

Terminal
npm install next@latest react@latest react-dom@latest

Fast Refresh pour getStaticProps / getServerSideProps

Lorsque vous modifiez vos fonctions getStaticProps et getServerSideProps, Next.js relance désormais automatiquement la fonction et applique les nouvelles données. Cela vous permet d'itérer plus rapidement sans avoir à rafraîchir la page.

Pour en savoir plus sur getStaticProps et getServerSideProps, consultez la documentation sur la récupération de données.

Fast Refresh pour MDX

Lorsque vous utilisez Next.js avec MDX via @next/mdx, les modifications du contenu MDX profitent désormais du Fast Refresh, ce qui évite au navigateur de recharger la page lors des modifications.

La documentation de @next/mdx vous guide pour configurer MDX avec Next.js.

Importation de CSS depuis des composants React tiers

Vous pouvez désormais importer du CSS tiers à l'intérieur de composants React. Cela permet de diviser le code CSS destiné à un seul composant. Par exemple, vous pouvez maintenant utiliser la bibliothèque react-datepicker sans avoir à importer le CSS dans _app.js :

components/MyComponent.js
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
 
function MyComponent() {}

Vous pouvez consulter la documentation sur le support CSS intégré pour en savoir plus sur la gestion des imports CSS par Next.js.

Résolution automatique de href

Si vous avez déjà utilisé des routes dynamiques, vous avez probablement rencontré un cas où vous deviez fournir à la fois une propriété href et as à next/link. Cela ressemblait à ceci :

<Link href="/categories/[slug]" as="/categories/books" />

Cela permettait à Next.js d'interpoler le href pour les paramètres dynamiques, mais cela créait des frictions lorsque les développeurs oubliaient d'ajouter as ou mettaient as dans href, ce qui empêchait les transitions de page d'utiliser le routage côté client.

Nous avons cherché à résoudre ces frictions pour les développeurs il y a quelques mois, avec pour objectif principal d'améliorer l'expérience des développeurs et des utilisateurs finaux. Nous avons progressivement travaillé vers une solution permettant de résoudre automatiquement href.

Nous sommes ravis d'annoncer que dans Next.js 10, vous n'avez plus besoin d'utiliser la propriété as pour la majorité des cas d'utilisation. Cela supprime les frictions pour les développeurs et améliore l'expérience utilisateur finale.

Ce changement est entièrement rétrocompatible. Si vous utilisez actuellement à la fois href et as, le comportement existant est conservé.

Pour adopter la résolution automatique de href, il vous suffit de modifier votre utilisation de next/link pour n'utiliser que href avec la valeur que vous aviez précédemment dans la propriété as.

<Link href="/categories/books" />

Pour en savoir plus sur next/link et le routage côté client, consultez la documentation de next/link.

CLI @next/codemod

Nous nous engageons à rendre les mises à niveau de Next.js aussi fluides que possible grâce à une large compatibilité ascendante. Cet engagement commence par une utilisation très parcimonieuse des dépréciations tout en introduisant de nouvelles solutions meilleures. En plus de cet engagement, nous avons des tests d'intégration exhaustifs pour toutes les fonctionnalités de Next.js, y compris des tests qui reproduisent le développement local.

Lorsqu'une fonctionnalité de Next.js est dépréciée et nécessite des modifications importantes du codebase, notre équipe crée un codemod pour elle. Un codemod est une transformation automatisée du code que vous pouvez exécuter sur votre projet pour mettre à jour le code source.

Par exemple : Nous avons publié un codemod pour mettre à jour les fonctions fléchées et les fonctions anonymes en fonctions nommées. Cette transformation est nécessaire car sinon React Fast Refresh ne détecte pas la fonction comme un composant React valide. De même, les règles ESLint des hooks React ne reconnaîtraient pas la fonction comme un composant React.

Avec Next.js 10, nous publions un nouvel outil CLI de codemods Next.js qui vous permet d'exécuter une seule commande pour mettre à jour votre application : npx @next/codemod <transform> <path>.

Pour en savoir plus sur les codemods, consultez la documentation des codemods Next.js.

Fallback bloquant pour getStaticPaths

Dans Next.js 9.3, nous avons introduit getStaticProps et getStaticPaths ainsi que la possibilité de retourner une propriété fallback dans getStaticPaths. La propriété fallback permet de générer des pages statiques supplémentaires sans avoir besoin d'une reconstruction complète, en servant d'abord un fichier HTML statique qui est ensuite remplacé par le contenu entièrement rendu lors des requêtes suivantes. Ces derniers mois, nous avons reçu beaucoup de retours d'entreprises qui souhaitaient un comportement similaire mais légèrement différent : un pré-rendu bloquant lorsque l'utilisateur demande la page pour la première fois. Après ce rendu initial, la page serait réutilisée pour les requêtes suivantes.

Avec Next.js 10, nous répondons à ce besoin.

Nous sommes ravis d'annoncer le nouveau mode fallback: 'blocking' pour getStaticPaths, qui active le comportement bloquant où aucun fallback statique n'est envoyé au navigateur. À la place, la requête initiale attend le pré-rendu.

pages/posts/[id].js
export function getStaticPaths() {
  return {
    // active le mode bloquant pour le comportement de fallback
    fallback: 'blocking',
  };
}

Pour en savoir plus sur le comportement fallback pour la génération incrémentielle de pages statiques supplémentaires, consultez la documentation sur fallback.

Support de redirect et notFound pour getStaticProps / getServerSideProps

Depuis l'introduction de getStaticProps et getServerSideProps, nous avons remarqué des cas où les utilisateurs avaient besoin de retourner des redirections et des réponses 404. Pour simplifier ces cas, nous permettons désormais de retourner deux nouveaux champs depuis getStaticProps et getServerSideProps : notFound et redirect.

Support de notFound

Lorsque vous retournez le champ notFound avec true, la page 404 par défaut sera retournée avec un code d'état 404. Cela vous évite de générer des pages supplémentaires avec SSG et de devoir gérer manuellement le rendu de la page 404.

pages/posts/[id].js
export function getStaticProps() {
  return {
    // retourne la page 404 par défaut avec un code d'état 404
    notFound: true,
  };
}

Support de redirect

Les redirections peuvent désormais être retournées avec un destination et une indication de permanence, par exemple permanent: true. Un statusCode optionnel peut également être retourné à la place du champ permanent pour les cas où vous avez besoin d'utiliser un statut spécifique plutôt que les valeurs par défaut.

pages/posts/[id].js
export function getStaticProps() {
  return {
    // retourne une redirection vers une page interne `/another-page`
    redirect: {
      destination: '/another-page',
      permanent: false,
    },
  };
}
pages/posts/[id].js
export function getServerSideProps() {
  return {
    // retourne une redirection vers un domaine externe `example.com`
    redirect: {
      destination: 'https://example.com',
      permanent: false,
    },
  };
}

Conclusion

Nous sommes ravis de voir l'adoption continue de Next.js :

  • Nous avons eu plus de 1 300 contributeurs indépendants, dont plus de 120 nouveaux contributeurs depuis la version 9.5
  • Sur GitHub, le projet a été mis en favori plus de 54 800 fois.

Rejoignez la communauté Next.js sur GitHub Discussions. Discussions est un espace communautaire qui vous permet de vous connecter avec d'autres utilisateurs de Next.js et de poser librement des questions ou de partager votre travail.

Crédits

Nous remercions notre communauté, y compris tous les retours externes et contributions qui ont aidé à façonner cette version.

Cette version a été rendue possible grâce aux contributions de : @ijjk, @adebiyial, @elliottsj, @saintmalik, @HaNdTriX, @prateekbh, @amirsaeed671, @paambaati, @imagentleman, @gregrickaby, @Janpot, @atcastle, @Kirkhammetz, @remorses, @davidsonsns, @kmkzt, @slawekkolodziej, @Timer, @styfle, @timneutkens, @ykzts, @ashconnell, @orYoffe, @lfades, @justinwhall, @fbaiodias, @ludofischer, @felipeguilhermefs, @gr-qft, @TasukuUno, @YichiZ, @weichienhung, @seosmmbusiness, @HsuTing, @gsimone, @peduarte, @ztanner, @neighborhood999, @chibicode, @merceyz, @opudalo, @lunchboxav, @mohsen1, @akd-io, @justman00, @helloworld, @devknoll, @borekb, @ArthurMaverick, @sakito21, @TrySound, @omBratteng, @svenheden, @hallaji, @kettanaito, @vvo, @m-lautenbach, @jensmeindertsma, @Zeko369, @longlho, @stefanprobst, @laugharn, @sdornan, @daneroo, @mohd-akram, @austingmhuang, @sphilee, @devinekadeni, @Bacher, @nghiepit, @tomasdisk, @leader22, @paulogdm, @284km, @belgattitude, @geritol, @stigkj, @sampoder, @samrobbins85, @Pitasi, @digitalPlayer1125, @timfee, @plug-n-play, @philihp, @leerob, @dylanjha, @Kerumen, @rdimaio, @jorisw, @zerbinidamata, @jamesgeorge007, @Jashnm, et @futantan !