Mise à jour du routeur d'application Next.js

Le routeur d'application représente une nouvelle fondation pour l'avenir de Next.js, mais nous reconnaissons qu'il existe des opportunités pour améliorer l'expérience. Nous souhaitons faire un point sur nos priorités actuelles.

Pour les prochaines versions de Next.js, nous nous concentrons sur les domaines suivants :

• Amélioration des performances
• Amélioration de la stabilité
• Amélioration de la formation des développeurs

Le routeur d'application

Tout d'abord, il est utile de fournir un contexte sur la conception du routeur d'application.

Dépasser le routeur Pages en s'alignant sur React

Alors que nous observions une adoption croissante et des applications à plus grande échelle construites avec Next.js, nous avons reçu des retours de la communauté et identifié des domaines où nous commencions à atteindre les limites du routeur Pages.

Plus particulièrement, le routeur Pages de Next.js n'était pas conçu pour le streaming, une primitive fondamentale dans React moderne, qui nous aide à adresser les limitations rencontrées et à réaliser notre vision à long terme pour Next.js.

Créer des APIs de framework compatibles avec le streaming pour la récupération de données, le chargement d'assets et les métadonnées de page, ainsi que tirer parti des nouvelles primitives de React, a nécessité des changements majeurs dans l'architecture cœur de Next.js.

Nous avons saisi l'opportunité de construire sur les dernières fonctionnalités concurrentes de React, comme les composants serveur, Suspense, et plus encore, qui ont été conçus pour des architectures de streaming.

L'adoption progressive est non négociable

Nous ne voulions pas que notre communauté ait à reconstruire entièrement ses applications pour migrer vers la dernière version de Next.js. Nous croyons que l'adoption progressive est la meilleure stratégie pour faire évoluer les applications dans le temps.

• Migration progressive par route : Sans réécriture majeure de votre application, vous pouvez déplacer une seule route de votre application vers le routeur d'application et commencer à profiter des nouvelles fonctionnalités à votre rythme. Consultez notre guide d'adoption progressive ou regardez un tutoriel.
• Retour arrière facile : Si vous n'êtes pas satisfait des performances ou de l'expérience développeur du routeur d'application, vous pouvez facilement revenir au routeur Pages pour cette route spécifique.

Nous explorons d'autres opportunités pour rendre l'adoption progressive encore plus simple.

Route vers la stabilité

Nous avons commencé à construire le routeur d'application Next.js il y a plus d'un an et avons régulièrement publié de nouvelles fonctionnalités et améliorations depuis.

• Annonce initiale : En mai de cette année, nous avons publié un RFC pour décrire nos plans visant à rendre le routage et les layouts plus flexibles.
• Bêta précoce : Dans Next.js 13, nous avons publié la première version du routeur d'application, permettant à la communauté de l'essayer et de fournir des retours précoces.
• API stable : En réponse aux retours, nous avons concentré nos efforts sur la finalisation de l'API cœur. Dans la version 13.4, nous avons marqué l'API cœur du routeur d'application comme stable et prête pour une adoption plus large.

Notre focus actuel

Marquer la stabilité a signalé à la communauté que l'API cœur était figée et ne subirait pas de changements majeurs cassants nécessitant des réécritures.

Depuis, nous avons reçu de nombreux retours précieux et l'adoption croissante a inévitablement révélé des bugs et des opportunités d'amélioration.

Nous voulons que vous sachiez que nous ne sommes pas encore satisfaits de l'expérience d'utilisation du routeur d'application et que c'est notre priorité absolue pour la suite. Parlons donc du travail que nous faisons pour améliorer cette expérience.

Amélioration des performances

Dans les prochains mois, nous nous concentrons sur trois aspects des performances : la vitesse d'itération locale, les temps de build en production, et les performances serverless.

Performances en développement local

Alors que Next.js a mûri et que la taille des applications construites avec a augmenté, nous avons progressivement remplacé des parties de son architecture sous-jacente par des outils plus rapides et plus évolutifs.

• Progrès de la migration : Nous avons commencé par remplacer Babel (compilation) et Terser (minification) par SWC. Cela a aidé à améliorer les vitesses d'itération locale et les temps de build en production.

• Investissement à long terme : Maintenir d'excellentes performances de Fast Refresh quelle que soit la taille d'une application signifie faire fonctionner Next.js de manière aussi incrémentale que possible pendant le développement local, en ne bundleant et compilant que le code nécessaire.

  C'est pourquoi nous travaillons actuellement à remplacer webpack (bundling) par Turbopack, qui est construit sur un moteur de calcul incrémental bas niveau permettant une mise en cache jusqu'au niveau des fonctions individuelles.

  Les applications Next.js passant à Turbopack verront des améliorations soutenues de la vitesse de Fast Refresh même lorsqu'elles grandissent en taille.

  Ces derniers mois, l'équipe Turbo s'est concentrée sur l'amélioration des performances de Turbopack et le support de toutes les fonctionnalités Next.js et APIs du routeur d'application.

  Turbopack est actuellement disponible en bêta (next dev --turbo).

• Amélioration de l'architecture actuelle : En plus d'investir dans le futur, nous continuons à apporter des améliorations de performances à notre architecture webpack existante.

  Pour certaines applications Next.js, en particulier celles rafraîchissant des milliers de modules, nous avons vu des rapports d'instabilité avec le développement local et Fast Refresh. Nous travaillons à améliorer les performances et la fiabilité ici. Par exemple, nous avons récemment ajouté des paramètres préconfigurés (modularizeImports) pour gérer les grandes bibliothèques d'icônes qui pourraient accidentellement forcer des milliers de modules à se recharger à chaque requête.

Performances au moment du build

Nous travaillons également sur les builds de production avec Turbopack (next build --turbo) et avons commencé à intégrer les premières parties de ce travail. Attendez-vous à plus de mises à jour dans les prochaines versions.

Performances en production

Enfin, sur Vercel, nous travaillons à optimiser les performances et l'utilisation mémoire des Vercel Functions définies via le code d'application Next.js, garantissant des démarrages à froid minimaux tout en conservant les bénéfices d'une architecture serverless évolutive. Ce travail a abouti à de nouvelles capacités de traçage (expérimental) dans Next.js et des explorations précoces d'outils côté serveur pour les développeurs.

Amélioration de la stabilité

Le routeur Pages existe depuis six ans maintenant. La sortie du routeur d'application a signifié l'introduction de nouvelles APIs encore jeunes, avec seulement six mois d'utilisation. Nous avons fait beaucoup de chemin en peu de temps, mais il reste des opportunités d'amélioration alors que nous apprenons davantage de notre communauté et de son utilisation.

Nous apprécions la volonté de la communauté d'adopter rapidement le routeur d'application et de fournir des retours. Il y a eu un nombre de rapports de bugs que nous investiguons et nous sommes reconnaissants pour les reproductions minimales que vous avez créées pour aider à isoler les problèmes et vérifier les correctifs.

Depuis la 13.4, nous avons déjà corrigé plusieurs bugs à fort impact sur la stabilité, disponibles dans la dernière version de correctif (13.4.7). Nous continuerons à nous concentrer intensément sur les performances et la stabilité.

Amélioration de la formation des développeurs

Bien que nous croyions que les nouvelles fonctionnalités du routeur d'application et de React moderne sont puissantes, elles nécessitent également une formation et une documentation supplémentaires pour enseigner ces nouveaux concepts.

Fonctionnalités Next.js

Nous avons travaillé cette dernière année à réécrire la documentation Next.js à partir de zéro. Ce travail est maintenant en ligne sur nextjs.org/docs. Nous souhaitons mettre en avant quelques éléments importants :

• Bascule entre Pages et App : Vous pouvez alterner entre l'apprentissage du routeur Pages ou du routeur d'application en utilisant le bouton sur le côté gauche de la documentation. De plus, vous pouvez filtrer les résultats de recherche en fonction de votre choix de routeur.
• Contenu et architecture d'information améliorés : Presque chaque page de la documentation du routeur d'application a été rafraîchie, avec une structure plus claire et une cohérence accrue entre les pages, ainsi que des centaines de nouvelles illustrations pour expliquer visuellement comment Next.js fonctionne.
• Plus à venir : Nous avons encore du travail ici. L'équipe Expérience Développeur chez Vercel travaille dur pour fournir des ressources d'apprentissage supplémentaires (y compris un cours mis à jour sur /learn enseignant le routeur d'application) et des exemples de codebase réels (y compris une réécriture de Next.js Commerce).

Nous publierons de nouveaux contenus dans la documentation, sur Twitter, YouTube, et plus encore.

Nouvelles fonctionnalités React

Nous avons également entendu vos retours concernant la formation autour des nouvelles fonctionnalités React disponibles dans le routeur d'application Next.js.

• Composants serveur : Il est important de noter que des fonctionnalités comme les composants serveur et des conventions comme la directive "use client" ne sont pas spécifiques à Next.js, mais font partie d'un écosystème React plus large.

  Notre équipe, nos partenaires chez Meta, et d'autres contributeurs indépendants travaillent à fournir plus de formation sur ces sujets. Ces concepts en sont à leurs débuts, mais nous avons confiance dans l'écosystème React et la formation continue.

• Composants client : Avec la récente conversation autour des composants serveur, il est important de noter que les composants client ne sont pas une dé-optimisation. Le client est une partie valide du modèle React et ne disparaîtra pas.

  Vous pouvez considérer les composants client comme l'écosystème Next.js existant aujourd'hui, où vos bibliothèques et outils préférés continuent de fonctionner. Par exemple, une question commune que nous avons vue est de savoir si "use client" doit être ajouté à chaque fichier pour en faire un composant client. Ce n'est pas nécessaire, mais nous comprenons que ces concepts sont nouveaux et prendront du temps à apprendre. Vous n'avez besoin que de marquer la limite de niveau supérieur où votre code passe du serveur au client. Cette architecture vous permet d'entrelacer composants serveur et client.

• Croissance de l'écosystème tiers : En plus de la formation, l'écosystème autour des nouvelles fonctionnalités de React est encore en croissance. Par exemple, Panda CSS, une bibliothèque CSS-in-JS des créateurs de Chakra UI, vient d'annoncer le support des composants serveur React.

• Actions serveur (Alpha) : Les actions serveur permettent des mutations de données côté serveur, réduisent le JavaScript côté client et améliorent progressivement les formulaires. Nous ne recommandons pas encore d'utiliser les actions serveur en production. Nous apprécions les retours précoces des testeurs alpha nous aidant à façonner le futur de cette fonctionnalité.

Merci

Nous sommes reconnaissants que beaucoup d'entre vous aient choisi d'apprendre et de construire avec Next.js.

Notre focus sur les performances, la stabilité et l'expérience développeur se reflètera dans les prochaines versions de Next.js. Nous voulons que l'utilisation de Next.js soit un plaisir - et vous rendre (ainsi que votre équipe) plus productifs.

Comme toujours, nous apprécions grandement vos retours. Si vous rencontrez des problèmes avec Next.js, veuillez ouvrir un ticket, ou démarrer une nouvelle discussion, et nous investiguerons.