Il existe une multitude d’outils javascript disponibles pour le développement web. Next.js est un framework de développement open source construit au-dessus de Node.js permettant aux applications web basées sur React d'offrir des fonctionnalités telles que le rendu côté serveur et la génération de sites web statiques. L'équipe de développement de Next.js a annoncé le 26 octobre la sortie de la version 12 de Next.js. « Comme nous l'avons annoncé lors de la conférence Next.js, Next.js 12 est la plus grande version jamais publiée », a déclaré l’équipe de développement de Nest.js.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.
Notons que Node.js est un environnement d'exécution JavaScript basé sur le moteur JavaScript V8 de Google qui exécute le code JavaScript en dehors du navigateur. Il aide les développeurs à créer des unités de code non bloquantes afin de tirer le meilleur parti des ressources système pour créer des applications plus réactives. Comme dit précédemment, Next.js est un framework de développement open source construit au-dessus de Node.js.
L'équipe de développement de Node.js a annoncé le 19 octobre la sortie de la version 17 de Node.js. Cette version est livrée avec OpenSSL 3 et la version 9.5 du moteur JavaScript V8. « L'inclusion d'OpenSSL 3.0 est une grande nouveauté. Cela nous donne une voie vers la communauté FIPS (Federal Information Processing Standards) », a déclaré Michael Dawson Responsable Node.js pour Red Hat et IBM chez Red Hat.
Recommandées lors du lancement d'une nouvelle application, Next.js est l'une des « chaînes d'outils » qui fournissent toutes une couche d'abstraction pour faciliter les tâches courantes. Il nécessite Node.js et peut être initialisé à l'aide du Node Package Manager. La documentation de React mentionne Next.js parmi les chaînes d'outils recommandées, le conseillant aux développeurs comme solution pour « construire un site Web avec rendu côté serveur avec Node.js ». Les applications React traditionnelles rendent tout leur contenu au navigateur côté client, Next.js est utilisé pour étendre cette fonctionnalité aux applications rendues côté serveur. Voici, ci-dessous, les nouveautés apportées par Nest.js 12 :
Compilateur Rust : constructions et rafraîchissement plus rapides
Next.js 12 comprend un tout nouveau compilateur Rust qui tire parti de la compilation native. Construit sur SWC, le tout nouveau compilateur Rust est construit sur SWC une plateforme ouverte pour la prochaine génération d'outils rapides. L'équipe de développement de Next.js a optimisé l'empaquetage et la compilation avec un rafraîchissement ~3x plus rapide localement et des constructions ~5x plus rapides pour la production. D'autres améliorations et fonctionnalités incluent :
- de nouvelles améliorations de la vitesse pour les bases de code : le compilateur Rust a été validé avec certaines des plus grandes bases de code Next.js au monde ;
- améliorations sous-jacentes de webpack : de nombreuses améliorations ont été apportées à webpack, notamment en optimisant Fast Refresh et en rendant les entrées à la demande plus fiables;
- amélioration de l'observabilité des performances : Next.js affiche désormais le temps de rafraîchissement rapide dans la console pour la compilation client et serveur, y compris le nombre de modules et de fichiers compilés.
La compilation utilisant Rust est 17x plus rapide que Babel et activée par défaut dans Next.js 12, remplaçant la transformation des fichiers JavaScript et TypeScript. L’équipe de développement de Nest.js a porté les transformations Babel de Next.js vers Rust, y compris un tout nouveau parseur CSS en Rust utilisé pour mettre en œuvre la transformation styled-jsx. Le nouveau compilateur Rust est rétrocompatible. L’équipe de développement de Nest.js prévoit de porter prochainement l'analyse pour des bibliothèques populaires comme styled-components, emotion et relay. Le compilateur Rust peut également être utilisé pour la minification. Il est 7x plus rapide que Terser. La minification est optionnelle jusqu'à ce qu'elle soit validée en profondeur, car elle remplace une infrastructure pluriannuelle.
| Code : | Sélectionner tout |
1 2 3 4 5 | // next.config.js
module.exports = {
swcMinify: true
} |
Rappelons que Rust est un langage de programmation compilé multiparadigme, conçu par Graydon Hore alors employé chez Mozilla Research, avec la contribution du créateur de JavaScript Brendan Eich. Utilisé par plusieurs grandes entreprises et par de nombreux développeurs dans le monde, Rust est devenu le langage de base pour certaines des fonctionnalités fondamentales du navigateur Firefox et de son moteur Gecko, ainsi que pour le moteur Servo de Mozilla.
« Mozilla a incubé Rust pour mieux développer Firefox et contribuer à un meilleur Internet », écrit Bobby Holley, membre du conseil d'administration de la fondation Mozilla et Rust, dans une déclaration. « Avec cette nouvelle fondation, Rust aura la possibilité de se développer, tout en continuant à amplifier certaines des valeurs fondamentales que Mozilla partage avec la communauté Rust ».
Google a également annoncé le 6 avril que l'Android Open Source Project (AOSP) prendra désormais en charge le langage Rust pour le développement de son système d’exploitation mobile. « Outre les langages à mémoire sécurisée comme Kotlin et Java, nous sommes heureux d'annoncer que le projet Android Open Source prend désormais en charge le langage de programmation Rust pour le développement du système d'exploitation Android », a déclaré Google sur son blog. Cette annonce s'inscrit dans le cadre des efforts déployés par l'entreprise pour résoudre les problèmes de sécurité de la mémoire dans le système d'exploitation. Si vous avez une expérience de travail avec Rust, n'hésitez pas à postuler pour rejoindre l’équipe de développement de Nest.js.
Présentation des intergiciels avec Next.js
En architecture informatique, un intergiciel est un logiciel tiers qui crée un réseau d'échange d'informations entre différentes applications informatiques. Ils permettent d'utiliser le code plutôt que la configuration. Cela donne une flexibilité totale dans Next.js car il est possible d’exécuter du code avant qu'une requête ne soit complétée. En fonction de la requête entrante de l'utilisateur, il est possible de modifier la réponse en réécrivant, redirigeant, ajoutant des en-têtes ou même en diffusant du HTML. Avec Next.js, l'intergiciel peut être utilisé pour tout ce qui partage la logique d'un ensemble de pages, notamment :
- journalisation ;
- l'authentification ;
- analyse côté serveur ;
- redirection et réécriture ;
- protection contre les robots ;
- indicateur de fonctionnalités et tests A/B ;
- gestion des navigateurs non pris en charge ;
- exigences avancées en matière de routage i18n.
l'intergiciel utilise un runtime strict qui prend en charge les API Web standard comme fetch. Cela fonctionne d'emblée avec Next.js, ainsi que sur les plateformes Edge comme Vercel, qui utilisent les fonctions Edge. Pour utiliser un intergiciel dans Next.js, il est possible de créer un fichier pages/_middleware.js. Dans l’exemple ci-dessous, la réponse API Web standard (MDN) est utilisée :
| Code : | Sélectionner tout |
1 2 3 4 | // pages/_middleware.js
export function middleware(req, ev) {
return new Response('Hello, world!')
} |
Support des modules ES et importations d'URL
ES Modules est la norme ECMAScript pour travailler avec des modules. Alors que Node.js utilise le standard CommonJS depuis des années, le navigateur n'a jamais eu de système de module, car chaque décision majeure telle qu'un système de module doit d'abord être normalisée par ECMAScript puis implémentée. Les modules ES apportent un système de modules officiel et standardisé à JavaScript. Ils sont pris en charge par tous les principaux navigateurs ainsi que par Node.js.
Cette norme fait progresser l'écosystème Web en permettant de réduire la taille des paquets et des modules JavaScript, ce qui se traduit par une meilleure expérience utilisateur. À mesure que l'écosystème JavaScript passe de Common JS (l'ancienne norme) aux modules ES, les développeurs adoptent progressivement ces améliorations sans procéder à des changements de rupture inutiles. À partir de Next.js 11.1, l’équipe de développement de Nest.js a ajouté un support expérimental pour que les modules ES soient prioritaires par rapport aux modules CommonJS. Dans Next.js 12, c'est maintenant le cas par défaut. L'importation de modules NPM qui ne fournissent que CommonJS est toujours supportée.
Importations d'URL
Next.js 12 inclut un support expérimental pour l'importation de modules ES par le biais d'URLs, aucune installation ou étape de construction séparée n'est requise. Les importations URL permettent d'utiliser n'importe quel paquet directement via une URL. Cela permet à Next.js de traiter les ressources HTTP(S) distantes exactement comme des dépendances locales. Si une importation d'URL est détectée, Next.js génère un fichier next.lock pour suivre les ressources distantes. Les importations d'URL sont mises en cache localement pour que vous puissiez continuer à travailler hors ligne. Next.js prend en charge les importations d'URL client et serveur. Pour en bénéficier, il est recommandé d’ajouter les préfixes d'URL autorisés dans next.config.js :
| Code : | Sélectionner tout |
1 2 3 4 5 | module.exports = {
experimental: {
urlImports: ['https://cdn.skypack.dev']
}
} |
Ensuite, les modules sont importés directement à partir d'URLs :
| Code : | Sélectionner tout |
import confetti from 'https://cdn.skypack.dev/canvas-confetti'
Dans Next.js 8, l'option target était introduite. Celle-ci permettait de produire des pages Next.js sous forme de paquets JavaScript autonomes en regroupant toutes les dépendances à l'aide de webpack pendant la construction. Maintenant, des améliorations sont apportées directement dans le framework Next.js par défaut, pour toutes les plateformes de déploiement, fournissant une approche considérablement améliorée par rapport à l'option cible.
Next.js 12 trace automatiquement quels fichiers sont nécessaires pour chaque page et route API en utilisant @vercel/nft, et sort ces résultats de trace à côté de la prochaine sortie de build, permettant aux intégrateurs d'exploiter les traces que Next.js fournit automatiquement. Ces changements optimisent également les applications déployées à l'aide d'outils comme Docker grâce à Next.js. En tirant parti de @vercel/nft, nous serons en mesure de rendre la sortie Next.js autonome à l'avenir. Aucune dépendance ne devra être installée pour exécuter l'application, ce qui réduira massivement la taille de l'image Docker. L'intégration de @vercel/nft dans Next.js remplace l'approche target, rendant target déprécié dans Next.js 12.
Quelques ruptures avec Next.js 12
Après avoir fait de webpack 5 la version par défaut de Next.js 11, l’équipe de développement de Nest.js a officiellement supprimé webpack 4 pour assurer une transition en douceur vers webpack 5. Parmi les points de ruptures, on a constaté que target dans next.config.js n'est plus nécessaire, next/image utilise désormais un span comme élément au lieu d'un div. En fin, la version minimale de Node.js a été augmentée de 12.0.0 à 12.22.0, qui est la première version de Node.js avec le support natif des modules ES.
Créer une application Next.js
Pour construire une application web complète avec React à partir de zéro, il y a de nombreux détails importants à prendre en compte :
le code doit être regroupé à l'aide d'un bundler comme webpack et transformé à l'aide d'un compilateur comme Babel ou Rust ;
des optimisations de production telles que le fractionnement du code doivent être effectués.
Certains développeurs estiment que la stratégie qui consiste à fournir toutes une couche d'abstraction pour faciliter les tâches courantes pose plusieurs problèmes, notamment l'impossibilité de répondre aux besoins des utilisateurs qui n'ont pas accès à JavaScript ou qui l'ont désactivé, les problèmes de sécurité potentiels, l'allongement significatif du temps de chargement des pages et le risque de nuire à l'optimisation globale du site pour les moteurs de recherche. Des frameworks tels que Next.js contournent ces problèmes en permettant à une partie ou à la totalité du site Web d'être rendu côté serveur avant d'être envoyé au client.
Source Next.js
Et vous ?
Que pensez-vous de Next.js ? Quelle amélioration vous intéresse le plus ? Que pensez-vous de l'adoption du compilateur Rust au détriment de Babel ?:Voir aussi :
Microsoft annonce React Native pour Windows & macOS, une extension pour créer des applications natives Windows et macOS, avec JavaScript et React JavaScript : un langage fortement typé, êtes-vous prêt à l'accepter ? La version 17 de Node.js, le moteur d'exécution JavaScript, est disponible, avec OpenSSL 3, bien que Deno, son concurrent, estime que la création des projets Node peut devenir une tâche ardue La Version 1.14 de Deno, le runtime pour exécuter JavaScript et TypeScript, est disponible, elle apporte des ajouts à l'API Crypto Web et de nouvelles fonctionnalités