Article

Dynamique sans limites : 2022 Next.js

3 min lecture

Publié le 13 mai 2024

Dynamique sans limites : 2022 Next.js

En quoi la nouvelle version de Next.js change-t-elle la donne pour les développeurs?

Nous, à JAKALA (anciennement FFW), sommes fiers d'être partenaires de Vercel et honorés d'avoir vécu ce qui a été l'une des conférences les plus importantes et les plus passionnantes de cette année. L'événement de cette année a apporté de grandes annonces sur les fonctionnalités majeures qui viennent d'être lancées et qui auront un impact sur l'avenir du web. 

Les membres de l'équipe JAKALA (anciennement FFW) présents ont appris et expérimenté tant de choses lors de l'événement et ont eu des conversations inspirantes avec tant d'autres membres de cette communauté qui s'efforcent de repousser les limites de l'avenir du web. 

Si vous n'avez pas pu assister à l'événement de cette année, voici un résumé de nos principaux points à retenir. 

Bien sûr, la principale nouvelle de l'événement concernait la version 13 de Next.js, qui représente une nouvelle approche de la mise en page des sites Web, de la récupération des données et du rendu du serveur. L’événement nous a marqué par les mises à jour passionnantes qui nous ont séduites, ainsi que tous les participants. Turbopack a été l'un des sujets les plus discutés. 

Dans le cadre de l'annonce de la mise à jour Next.js 13, nos partenaires de Vercel ont présenté un nouvel outil qui change la donne, Turbopack, un nouveau successeur de Webpack basé sur Rust. Webpack a été téléchargé plus de 3 milliards de fois et est devenu une partie intégrante du Web. Construit avec le créateur de Webpack, Turbopack est un tout nouvel outil de regroupement pour les bases de code JavaScript et TypeScript écrites en Rust. Conçu avec l'équipe derrière Turborepo, Turbopack est le premier et le seul système de construction pour JavaScript et TypeScript conçu dès le départ pour les constructions incrémentielles, tant pour le développement que pour la production. 

Bien que tout le monde ait été impressionné par Turbopack, la communauté des développeurs présente était la plus enthousiaste. Ils étaient séduits par la promesse de Turbopack de faciliter leur vie quotidienne. 

L'utilisation du Turbopack + Next.js 13 donne le résultat suivant : 

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

Autres versions clés de Next.js 13 

Bien que TurboPack soit un sujet à la mode, de nombreux autres aspects de la nouvelle version ont suscité l'intérêt et l'enthousiasme des participants. 

Infrastructure de routage et de rendu 

Next.js 13 tient sa promesse d'expédier moins de JavaScript côté client tout en apportant des améliorations substantielles à l'expérience du développeur en introduisant une approche repensée du routage, de la récupération des données et du rendu du serveur. 

Next.js et Vercel sont les premiers à apporter les composants React Server, la récupération de données pour Suspense, et la prise en charge des mises en page hybrides et imbriquées à un cadre JavaScript majeur, menant l'industrie avec leur approche innovante pour rendre le Web plus rapide et plus dynamique. 

Cette nouvelle fonctionnalité a été conçue en tandem avec les avancées de l'infrastructure Vercel, notamment la prise en charge du streaming sur l'ensemble de notre pile de calcul sans serveur, les routes et le rendu des API Edge, ainsi que de nouvelles stratégies de mise en cache.  

Kit du développeur 

Next.js 13 comprend également des mises à jour de composants et de modules au sein de la boîte à outils Next.js qui rendent certaines parties couramment utilisées et nécessaires des sites Web plus rapides, plus faciles et plus fiables à obtenir pour les développeurs, notamment les images, les polices, les scripts et les cartes sociales. 

Cela comprend : 

Une prise en charge et une fonctionnalité améliorées des polices : 

Le nouveau module intégré Next.js Font facilite l'utilisation de polices personnalisées et de polices Google et offre un support qui fait des réseaux de diffusion de contenu (CDN) de polices tiers une relique du passé. Développé en collaboration avec Google, l'utilisation de Google Fonts par le biais de ce mécanisme ne partage désormais aucune information sur les visiteurs du site Web avec Google. Il permet également de générer des polices de secours, ce qui permet aux développeurs d'éviter 99 % des décalages de mise en page et supprime toute demande de réseau externe pour une meilleure confidentialité et de meilleures performances. 

Cela comprend : 

Une optimisation améliorée des images : 

Next.js 13 comprend une mise à jour du composant <Image>, utilisé par plus de 70 % de la communauté Next.js. S'appuyant sur les mises à jour des normes des navigateurs, le composant mis à jour peut déléguer davantage au navigateur pour des coûts globaux réduits grâce à sa capacité à stocker les images calculées à la périphérie. Lorsqu'il est d��ployé sur Vercel, le composant Image est automatiquement stocké et optimisé sur le réseau Vercel Edge Network pour des performances encore meilleures. 

Génération instantanée d'images Open Graph (OG) : la génération d'images OG de Vercel est une nouvelle bibliothèque pour générer des images dynamiques de cartes sociales. Cette approche est cinq fois plus rapide que les solutions existantes en utilisant les fonctions Vercel Edge, WebAssembly, et une toute nouvelle bibliothèque centrale pour convertir le HTML/CSS en SVG.  

Derniers points à retenir : l'ambiance générale de l'événement 

Pour dire les choses simplement, Next.js est arrivé. Next.js n'est pas précisément un "petit nouveau" et c'est une technologie puissante que nous, chez JAKALA (anciennement FFW), avons de plus en plus exploitée dans les solutions " headless " pour nos clients. Cet événement a été l'occasion d'affirmer que Next.js n'est plus un outil puissant, mais un outil de niche. Au contraire, Next.js est arrivé, et il va changer la donne. 

 

“Next.js devient un cadre de référence pour les applications javascript frontales, avec des interactions de plus en plus puissantes.” 

-Jon Bauer, JAKALA (anciennement FFW) Consultant en solutions de partenariats technologiques. 

Dans l'ensemble, l'événement a donné un sentiment palpable d'inclusivité et de démocratisation. Les participants étaient composés d'un large éventail d'experts numériques et de développeurs du monde entier, représentant des entreprises allant des start-ups aux entreprises Fortune 500. Peut-être que cela, ainsi que les progrès annoncés des offres de Next.js, est représentatif de la démocratisation de l'expérience numérique. 

Comment nous donnons le contrôle de votre plateforme numérique 

Lorsque nous envisageons des partenariats technologiques, nous nous demandons constamment "comment donner le meilleur pouvoir aux organisations avec lesquelles nous travaillons". 

Nous pensons que chaque entreprise devrait avoir le contrôle total, en exploitant et en optimisant sa plateforme numérique selon ses propres conditions. Cette conviction est un moteur important de notre passion pour les solutions "headless" et la communauté Next.js. 

Cette conviction est également une reconnaissance de nos partenaires chez Vercel, et de notre capacité à exploiter leurs technologies pour nos clients, en combinant l'agilité d'une plateforme web tout-en-un avec la puissance d'une pile technologique de pointe. 

Nous avons tiré parti de la puissance de Vercel pour effectuer une transformation numérique majeure pour certaines des plus grandes marques du monde, en donnant un contrôle exponentiel à leurs équipes et en établissant les bases d'une véritable évolutivité numérique. 

Les idées les plus audacieuses commencent par une simple conversation. 

Commençons la nôtre. 


Insights

Prix Women in Drupal 2022
Article

Prix Women in Drupal 2022

3 min lecture
Que signifie la personnalisation?
Article

Que signifie la personnalisation?

3 min lecture
JAKALA (anciennement FFW) et ses clients célèbrent les trois victoires d'Acquia Engage
Article

JAKALA (anciennement FFW) et ses clients célèbrent les trois victoires d'Acquia Engage

4 min lecture
Dynamique sans limites : 2022 Next.js
Article

Dynamique sans limites : 2022 Next.js

3 min lecture