Annoncé lors de la conférence next.js Conf, Next.js 13 est disponible. Alors que, selon ses concepteurs, une des fonctionnalités les plus appréciée de next.js est son routeur basé sur le système de fichiers, cette version 13 veut encore améliorer ce routage avec l'introduction du répertoire app/ en version bêta. Cet nouveau répertoire fait partie de l'implémentation de la RFC Layouts.

Ce répertoire app/ est conçu pour faciliter 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. Vous pouvez colocaliser le code d'application avec vos routes, comme les composants, les tests et les styles.

Ce répertoire app/ peut coexister avec le répertoire existant pages pour une adoption incrémentielle.

Autre nouveauté remarquable, Next.js 13 inclut Turbopack, le nouveau successeur de Webpack basé sur Rust. Si Webpack a été téléchargé plus de 3 milliards de fois, les concepteurs de next.js considèrent que les limites des performances maximales possibles avec les outils basés sur JavaScript sont atteintes. Turbapack est en version alpha pour le moment.

Selon l'équipe de Next.js, L'utilisation du Turbopack alpha avec Next.js 13 donne :

• Mises à jour 700x plus rapides que Webpack
• Mises à jour 10 fois plus rapides que Vite
• Démarrages à froid 4 fois plus rapides que Webpack

L'équipe précise que Turbopack ne regroupe que les ressources minimales requises pour le développement, de sorte que le temps de démarrage est extrêmement rapide. Sur une application de 3 000 modules, Turbopack met 1,8 seconde à démarrer. Vite prend 11,4 secondes et Webpack prend 16,5 secondes.

Turbopack prend en charge immédiatement les composants serveur, TypeScript, JSX, CSS, etc. Toutefois avec cette version alpha, de nombreuses fonctionnalités ne sont pas encore prises en charge.

A remarquer encore, Next.js 13 introduit un nouveau composant Image puissant, permettant d'afficher facilement des images sans changement de mise en page et d'optimiser les fichiers à la demande pour des performances accrues.

Enfin, 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é, souligne l'équipe de Next.js. 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.