Juste au moment où nous pensions que Next.js avait tout ce qu'il fallait pour embellir votre application, les créateurs du framework ont ajouté encore plus de fonctionnalités pour vous garantir une meilleure expérience.
Nous aborderons toutes les nouvelles fonctionnalités introduites dans Next.js 13, la dernière version de Next.js, de l'amélioration de la prise en charge des applications sans serveur aux nouveaux packages, ainsi que d'autres améliorations concernant tous les aspects de l'utilisation de Next.js.
Next.js est un framework open source permettant de créer des applications à page unique (SPA) de nouvelle génération. Il vous permet de créer des SPA plus rapidement et avec moins de code en utilisant les meilleures pratiques de l'écosystème React. Il vous propose les meilleures pratiques de développement modernes tout en vous aidant à réduire la courbe d'apprentissage.
Il est construit sur le Webpack Asset Pipeline et React. Vous pouvez facilement écrire votre application en mode de rendu côté serveur (SSR) ou en mode de rendu côté client (CSR) et la déployer sur plusieurs plateformes, notamment le Web, Android et iOS.
La popularité de Next.js, l'un des frameworks d'applications Web les plus populaires, tient à sa facilité d'utilisation et à son expérience pour les développeurs, mais il possède également des fonctionnalités qui le rendent particulièrement attrayant pour les entreprises de médias, de SaaS et de vente au détail. La version originale de Next.js était un framework React pour les serveurs dynamiques à l'intérieur des sites Web.
Next.js a été développé pour permettre aux équipes de créer des applications ambitieuses et complexes plutôt que des applications d'une seule page. Cependant, être dynamique a toujours eu de nombreuses limites. Pour être dynamique, il fallait jongler avec deux ensembles différents d'API d'exécution, des API Web classiques dans le navigateur et aucun code Javascript sur le serveur. Cela nécessite également d'investir dans des infrastructures coûteuses qui fonctionnent en permanence et nécessitent des processus à forte intensité de main-d'œuvre.
La mise à niveau d'une application statique était la seule méthode permettant de faire évoluer une application globale dynamique, à moins que vous ne soyez l'un des géants du Web tels que Google ou Facebook. Lorsque des exigences dynamiques sont présentes, les inconvénients de la statique deviennent évidents. Vous vous fiez à d'énormes quantités de JavaScript côté client car votre page mise en cache ou produite de manière statique n'est pas compatible avec une personnalisation précise de l'utilisateur. Essayer de tirer le meilleur parti de ces restrictions n'a jamais été la solution. C'est pourquoi Next.js 13 a été introduit.
Next.js 13 est la dernière version de Next.js. Les nouvelles fonctionnalités introduites sont énormes et certaines d'entre elles sont demandées depuis longtemps par la communauté. Il vous permet enfin d'être dynamique sans limites.
Next.js 13 inclut trois domaines d'innovation importants :
Examinons ces améliorations plus en détail.
C'est un nouveau départ pour l'écosystème Web dans son ensemble, pour Next.js et pour l'infrastructure des compilateurs. Aucun paramètre n'est requis, Next.js donne à votre application les valeurs par défaut idéales. L'écriture d'outils JavaScript en JavaScript en 2016 était tout à fait naturelle.
Le terme « outils » fait ici référence à Babel, Terser et Webpack. Ces outils ont eu du mal à suivre le rythme à mesure que les applications frontales augmentaient en taille et en complexité. Grâce aux performances de la compilation basée sur JavaScript, ils ont atteint leurs limites. Next.js a donc commencé à passer à un outillage natif alimenté par Rust.
Ensuite, le créateur de Webpack, Tobias Koppers, a rejoint l'équipe Vercel et, ensemble, ils ont créé Turbopack. Turbopack met à jour d'énormes applications 700 fois plus vite que Webpack et 10 fois plus vite que Vite. L'écart est considérablement plus prononcé pour les très grandes applications, avec des mises à jour 20 fois plus rapides que Vite.
Ces améliorations de vitesse s'appliquent au démarrage de votre serveur de développement local et aux modifications de code. Les performances de Turbopack sont dues à son moteur incrémental de bas niveau fabriqué avec Rust et à un code machine bien optimisé. Turbopack n'effectue qu'une seule tâche à la fois. En commençant par l'actualisation rapide de React, Turbopack se concentre sur votre expérience de développement local.
À l'avenir, Turbopack sera également utilisé pour alimenter les versions de production locales et basées sur le cloud de Next.js. En outre, vous pouvez collaborer avec des équipes de l'ensemble de votre organisation pour partager le travail déjà effectué, et pas seulement sur votre machine locale.
Vous pouvez essayer le Turbopack Alpha en passant à Next.js 13 et en exécutant développeur suivant —turbo.
Pour consulter les benchmarks et les fonctionnalités prises en charge, rendez-vous sur turbo.build.
Turbopack est donc la nouvelle pierre angulaire des outils en métal nu de haute performance et est désormais open source. Il est optimisé pour les bases de code React et Next.js.
Même pour d'énormes bases de code, la création en vue de la production peut être terminée en moins de dix secondes. Grâce au cache distant de Vercel et à l'infrastructure de build ourNext.js, ces mises à jour rapides sont bénéfiques pour vous et pour le reste de votre équipe en évitant la duplication des efforts. Le temps de création de ce cache distant a déjà permis aux équipes de développement d'entreprises de toutes tailles d'économiser pendant des décennies.
Next.js 13 repense la façon dont les pages sont organisées, visualisées et fournies à la périphérie pour faire progresser le Web. Le routeur basé sur le système de fichiers est l'une des fonctionnalités les plus appréciées de Next.js. Vous pouvez créer automatiquement des itinéraires dans votre application sans configuration en déposant un fichier dans un dossier.
Le routeur a contribué à la visualisation de certaines des plus grandes applications Web au monde. Cela a permis aux développeurs de usNext.js de trouver des opportunités incroyables pour continuer à fournir le meilleur routeur disponible. Pour permettre la récupération globale des données dans votre application, ils peuvent simplifier la colocalisation de la récupération des données dans les composants. Par exemple, le partage des exigences de données dynamiques entre les pages peut simplifier la colocalisation du code de votre application avec vos itinéraires, tels que les composants, les tests et les styles. Après cela, la création de vos conventions et de votre configuration n'est plus nécessaire pour vous et votre équipe.
Les interfaces complexes qui conservent leur état tout au long des navigations et évitent les redessins, les rendus et le redéclenchement coûteux des animations peuvent être mises en page plus facilement. Pour une adoption progressive, le nouveau routeur commence par introduire le répertoire des applications, qui peut coexister avec le répertoire de la page en cours.
L'équipe Next.js a collaboré avec l'équipe principale de React pour développer une nouvelle approche de la récupération qui bénéficiera à toutes les versions de React et Next.js. La récupération des données Next.js est étendue avec de nouvelles fonctionnalités, notamment la mise en cache intégrée, la déduplication des demandes, les revalidations programmables et la purge granulaire des données afin de maintenir son adaptabilité et son évolutivité.
En conséquence, une solution hybride combinant les avantages de l'ISR, de la récupération de données statiques, de la récupération de données côté service et même du SWR est désormais disponible. Sur ce produit, tout passe désormais d'abord par le serveur car le routeur est construit à l'aide de composants du serveur React. Des expériences riches et interactives côté client peuvent toujours être maintenues tout en réduisant considérablement le nombre de JavaScript fournis par défaut.
Les nouvelles primitives React permettent de gérer le chargement, les états d'erreur, le streaming de l'interface utilisateur lors de son rendu et peut-être même la mutation des données à l'avenir. Des années d'investissement dans l'écosystème React ont permis la création de cette nouvelle API.
Vous pouvez implémenter ces fonctionnalités en incluant le répertoire des applications dans vos bases de code nouvelles ou actuelles. Vous pouvez effectuer ce changement progressivement, même une page à la fois. Le répertoire des pages, en revanche, continue de bénéficier d'une maintenance et d'une maintenance complètes, et avec l'aide de Turbopack, le développement des répertoires de pages et d'applications peut être accéléré.
Le chargement rapide d'un site peut s'avérer compliqué. L'obtention de ressources tierces telles que des polices, des images et des scripts est tout aussi importante que la manière dont vous effectuez le rendu de vos composants. Vous devez corriger les choses pour éviter les changements brusques de mise en page, les retards de saisie et les retards de contenu peu clairs.
C'est la raison pour laquelle Next.js construit un compilateur et une infrastructure de rendu plus avancés. En outre, ils vous proposent des solutions à ces problèmes courants et plus complexes :
En moyenne, les images représentent 44 % du poids d'une page. La qualité des images est cruciale. 70 % des participants à la communauté Next.js ont déclaré que l'utilisation d'un composant d'image Next.js en production avait entraîné une amélioration des indicateurs Web de base.
Vercel peut optimiser les images à la demande pour une vitesse encore plus élevée, car elle complète ce composant d'image avec son infrastructure de périphérie mondiale. Grâce à cette collaboration entre le framework et l'infrastructure cloud, des milliards d'images optimisées ont désormais été distribuées sur le Web sans l'effort des développeurs.
L'efficacité et l'expérience des développeurs des composants d'image se sont considérablement améliorées dans Next.js 13. L'abstraction des composants de React est utile car elle peut contenir de la complexité tout en offrant une expérience utilisateur simple de type HTML. Next.js 13 lance un meilleur composant d'image qui utilise moins de JavaScript côté client, fonctionne mieux et conserve son interface familière grâce aux avancées de la plate-forme Web disponibles sur tous les principaux navigateurs, telles que le chargement différé des images natives et les ratios d'aspect CSS.
Dans Next.js 12, Image vit à la fois @next /image et @next /futur/image. Next.js 13 remplace le composant par défaut par :
suivant/image se déplace vers suivant/héritage/image;suivant/future/image se déplace vers suivant/image.
Le code de votre application sera automatiquement migré à l'aide d'un codemod. Next.js peut être mis à niveau facilement de cette façon :
Il est probablement courant que les polices de remplacement entraînent des modifications de mise en page ou même des retards importants avant que la bonne police n'apparaisse à l'écran. Next.js 13 montre que vous pouvez facilement modifier les polices de caractères de votre marque tout en maintenant un site Web rapide.
Grâce à un tout nouveau système de polices conçu en partenariat avec l'équipe Chrome, l'entreprise réinvente la façon dont les développeurs utilisent les polices. Ce module intégré optimise vos polices de caractères en supprimant les temps de configuration de connexion aux hôtes externes et en réduisant le besoin de requêtes réseau externes, améliorant ainsi la confidentialité et l'efficacité. Cela signifie que Next.js peut automatiquement vous proposer une police de caractères, vous donnant ainsi une identité de marque unique sur l'ensemble de votre domaine, que vous l'importiez à partir d'un registre tel que Google Fonts ou de vos propres fichiers de polices personnalisés.
En nous appuyant sur l'attribut CSS d'ajustement de la taille fourni par la plateforme Web, nous avons également éliminé les changements de mise en page. Le nouveau module de polices peut empêcher automatiquement 100 % des perturbations visuelles dues à des polices manquantes et 99 % des modifications de mise en page provoquées par des polices personnalisées.
Avec le nouveau @next /fonte module, vous pouvez optimiser vos polices Web pendant la construction. Il télécharge les ressources de polices et les héberge dans votre /public dossier. Votre police sera livrée le plus rapidement possible sans avoir à vous déplacer vers un autre serveur et sera correctement mise en cache avec le reste de vos ressources, ce qui vous permettra d'économiser des ressources.
Lorsque vous exécutez votre version de développement pour la première fois, assurez-vous de disposer d'une connexion Internet afin qu'elle puisse la mettre en cache correctement. À moins que Ajuster FontFallback est défini, les polices du système seront utilisées.
Un module spécial pour Google Web Fonts est également disponible dans @next /fonte:
Si vous utilisez des polices personnalisées, le module fonctionnera également :
Elles sont également appelées images graphiques ouvertes, ce qui peut augmenter considérablement le taux de clics de votre contenu. Les cartes sociales statiques demandent beaucoup d'efforts, sont difficiles à gérer et sont sujettes à des erreurs. Par conséquent, les cartes sociales font souvent défaut. Il est temps de redevenir dynamique. Les cartes sociales dynamiques, qui doivent être personnalisées et calculées instantanément, ont été difficiles et coûteuses à créer.
Par conséquent, Vercel OG Image Generation, une nouvelle méthode permettant de produire instantanément des cartes sociales dynamiques, a été annoncée par Next.js. Les fonctions Edge de Vercel, l'assemblage Web, une toute nouvelle bibliothèque de base pour transformer le HTML et le CSS en images et l'abstraction des composants React rendent cette méthode cinq fois plus rapide que les alternatives précédentes. Fini les équipements coûteux ni les navigateurs Web sans tête.
Une fois de plus, des expériences Web remarquables sont rendues possibles par la fusion de composants de base avec une infrastructure de pointe mondiale. Cela simplifiera les choses, économisera beaucoup de temps informatique et libérera des heures de travail pour les développeurs et les concepteurs.
Next.js est un framework qui existe depuis un certain temps et qui a rassemblé une large base d'utilisateurs. Avec cette version, les créateurs de Next.js ont inauguré une nouvelle ère de développement Web avec de nombreuses nouvelles fonctionnalités et améliorations par rapport aux fonctionnalités existantes.
Mises à jour majeures de Next.js 13 :
Pour cela, vous devez mettre à jour votre fichier Next.js et bénéficier de ces avantages. Si vous souhaitez mettre à niveau vos produits numériques en utilisant le dernier fichier Next.js et en faisant appel à une entreprise expérimentée et innovante, nous contacter. Nous travaillons sur React.js depuis plus de 12 ans, et certains des meilleurs développeurs européens y travaillent.
Rédacteur de contenu curieux de l'impact de la technologie sur la société. Toujours entouré de livres et de musique.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
