Les nouveautés de Next.js 13

Next.js 13 apporte Turbopack, le nouveau successeur de Webpack basé sur Rust et ne prend que 1,8 seconde pour démarrer

Rappelons que React est une bibliothèque JavaScript développée par Facebook depuis 2013 et traditionnellement utilisée pour créer des applications Web dont le rendu est assuré par JavaScript dans le navigateur du client. Le but principal de cette bibliothèque est de faciliter la création d'application web monopage, via la création de composants dépendant d'un état et générant une page HTML à chaque changement d'état. Next.js est l'un des composants les plus populaires de React.

Voyons ci-dessous quelques nouveautés de cette version.

Répertoire app/

Le répertoire app/ peut coexister avec le répertoire pages/ existant pour une adoption progressive. Bien que l’utilisateur n’ait pas besoin d'utiliser le répertoire app/ lors de la mise à niveau vers Next.js 13, les bases sont posées pour construire des interfaces complexes tout en envoyant moins de JavaScript.

• Mise en page

app/ facilite la mise en page d'interfaces complexes qui maintiennent l'état à travers les navigations, évitent les re-rendus coûteux et permettent des modèles de routage avancés. De plus, vous pouvez colocaliser le code d'application avec vos routes, comme les composants, les tests et les styles.

La création de routes à l'intérieur app /nécessite un seul fichier, page.js 

Il est désormais possible de définir des mises en page via le système de fichiers. Les mises en page partagent l'interface utilisateur entre plusieurs pages. Lors de la navigation, les mises en page préservent l'état, restent interactives et ne font pas l'objet d'un nouveau rendu.

• Composants de serveur

Le répertoire app/ introduit le support de la nouvelle architecture Server Components de React. Les composants de serveur utilisent le serveur et le client pour ce qu'ils font de mieux, ce qui permet de créer des applications rapides et hautement interactives avec un modèle de programmation unique qui offre une excellente expérience aux développeurs.

En utilisant les composants de serveur, il est possible de réduire la quantité de JavaScript envoyée au client, ce qui permet un chargement initial plus rapide des pages. Lorsqu'une route est chargée, le moteur d'exécution Next.js et React, dont la taille est prévisible et peut être mise en cache, est chargé. La taille de ce moteur d'exécution n'augmente pas à mesure que votre application se développe. En outre, le moteur d'exécution est chargé de manière asynchrone, ce qui permet d'améliorer progressivement le HTML du serveur sur le client.

• Streaming

Le répertoire app/ introduit la possibilité d'effectuer un rendu progressif et un flux incrémentiel des unités de l'interface utilisateur vers le client. Grâce aux composants de serveur et aux dispositions imbriquées de Next.js, il est possible de rendre instantanément les parties de la page qui ne requièrent pas spécifiquement de données, et d'afficher un état de chargement pour les parties de la page qui récupèrent des données. Avec cette approche, l'utilisateur n'a pas besoin d'attendre le chargement de la page entière avant de pouvoir commencer à interagir avec elle.

Lorsqu'elles sont déployées sur Vercel, les applications Next.js 13 qui utilisent le répertoire app/ diffuseront les réponses par défaut dans les moteurs d'exécution Node.js et Edge pour améliorer les performances.

• Récupération de données

Le répertoire app/ introduit une nouvelle façon puissante d'extraire des données, construite au-dessus de React Suspense for Data Fetching. Le nouveau hook use remplace les API Next.js précédentes comme getStaticProps et getServerSideProps et s'aligne sur l'avenir de React.

Il existe désormais un moyen flexible d'extraire, de mettre en cache et de revalider les données au niveau des composants. Cela signifie que tous les avantages de la génération de sites statiques (SSG), du rendu côté serveur (SSR) et de la régénération statique incrémentielle (ISR) sont désormais disponibles via le hook use de React et en étendant l'API fecth du Web :

Dans le répertoire d'applications, il est possible de récupérer des données à l'intérieur des pages et de composants  y compris la prise en charge des réponses en continu depuis le serveur. Il est possible de maintenir des expériences riches et interactives côté client tout en envoyant beaucoup moins de JavaScript par défaut. À mesure que le nombre de composants du serveur augmente dans votre application, la quantité de JavaScript nécessaire côté client reste constante.

Le répertoire app/ permet de gérer de manière ergonomique les états de chargement et d'erreur et de diffuser l'interface utilisateur au fur et à mesure de son rendu. La possibilité de colocaliser la récupération des données dans les composants et d'envoyer moins de JavaScript au client sont deux éléments importants de la communauté inclus dans le répertoire app/.

Présentation de Turbopack

Next.js 13 inclut Turbopack, le nouveau successeur de Webpack basé sur Rust. 

En utilisant l'alpha de Turbopack avec Next.js 13, on obtient :

• des mises à jour 700x plus rapides que Webpack ;
• des mises à jour 10x plus rapides que Vite ;
• des démarrages à froid 4x plus rapides que Webpack.

Turbopack ne regroupe que le minimum de ressources nécessaires au développement, le temps de démarrage est donc extrêmement rapide. Sur une application comportant 3 000 modules, le démarrage de Turbopack prend 1,8 seconde. Vite prend 11,4 secondes et Webpack 16,5 secondes. Turbopack prend en charge dès le démarrage les composants de serveur, TypeScript, JSX, CSS, etc. De nombreuses fonctionnalités ne sont pas encore prises en charge.

next/image

Next.js 13 introduit un nouveau composant puissant, Image, qui permet d'afficher facilement des images sans modifier la mise en page et d'optimiser les fichiers à la demande pour des performances accrues.

• Moins de JavaScript côté client ;
• plus facile à concevoir et à configurer ;
• plus accessible grâce aux balises alt par défaut ;
• s'aligne sur la plateforme Web ;
• Plus rapide car le chargement paresseux natif ne nécessite pas d'hydratation

next/link

next/link ne nécessite plus d'ajouter manuellement <a> comme filiation. Cette option a été ajoutée en tant qu'option expérimentale dans la version 12.2 et est maintenant la valeur par défaut. Dans Next.js 13, <Link> permet de transmettre les props à la balise sous-jacente.

Pour mettre à niveau vos liens vers Next.js 13, nous avons fourni un codemod qui mettra automatiquement à jour votre base de code. Par exemple, cette commande exécuterait le codemod sur votre ./pages  lorsqu'il est exécuté à partir de la racine : 

npx @next/codemod new-link ./pages

@next/font

Next.js 13 introduit un tout nouveau système de polices qui :

• Optimise automatiquement vos polices, y compris les polices personnalisées
• Supprime les demandes de réseau externe pour améliorer la confidentialité et les performances
• Auto-hébergement automatique intégré pour tout fichier de police
• Aucun décalage de mise en page automatiquement à l'aide de la propriété CSS size-adjust .

Ce nouveau système de polices vous permet d'utiliser facilement toutes les polices Google dans un souci de performances et de confidentialité. Les fichiers CSS et de police sont téléchargés au moment de la construction et auto-hébergés avec le reste de vos actifs statiques. Aucune demande n'est envoyée à Google par le navigateur.

Génération d'images OG

Les cartes sociales, également connues sous le nom d'images open graph, peuvent augmenter massivement le taux d'engagement des clics sur le contenu de l'utilisateur, certaines expériences montrant jusqu'à 40 % de conversions en plus. Les cartes sociales statiques prennent beaucoup de temps, sont sujettes à des erreurs et sont difficiles à entretenir. Pour cette raison, les cartes sociales sont souvent absentes ou même ignorées. Jusqu'à aujourd'hui, les cartes sociales dynamiques qui doivent être personnalisées et calculées à la volée étaient difficiles et coûteuses.
L'équipe Next.js a créé une nouvelle bibliothèque @vercel/og qui fonctionne de manière transparente avec Next.js pour générer des cartes sociales dynamiques.

Cette approche est 5 fois plus rapide que les solutions existantes grâce à l'utilisation des fonctions Vercel Edge, de WebAssembly et d'une toute nouvelle bibliothèque centrale pour convertir le HTML et le CSS en images et tirer parti de l'abstraction des composants React.

Mises à jour de l'API Middleware

Dans Next.js 12, l'équipe Nest.js a introduit le Middleware pour permettre une flexibilité totale avec le routeur Next.js. Elle a apporté quelques ajouts pour améliorer l'expérience du développeur et ajouter de nouvelles fonctionnalités. Il est maintenant possible de définir plus facilement les en-têtes sur la requête 

Il est maintenant possible de fournir une réponse directement à partir du Middleware, sans avoir à réécrire ou à rediriger.