L’entreprise Zeit annonce le framework Next.js en version stable
Zeit annonce le framework Next.js en version stable
pour le rendu des applications React avec un routage côté client semblables aux applications universelles natives
L’entreprise Zeit vient d’annoncer la sortie de la première version stable de Next.js, un framework permettant d’effectuer le rendu des applications web React par les serveurs avec un routage côté client qui se présente comme les applications universelles natives. Il est bâti sur React, Webpack et Babel. Pour les personnes extérieures à l’environnement, React est la bibliothèque JavaScript conçue par Facebook afin de créer des interfaces utilisateurs avec plus de facilité. Webpack est un outil permettant de grouper les modules avec les dépendances afin de générer des éléments statiques. Enfin, Babel est un transpileur de code ES6 en code ES5.
Pour ce qui concerne Next.js, la mise en œuvre de ce projet est partie de la volonté d’améliorer les acquis dans le monde JavaScript. Nodejs a introduit la possibilité de concevoir les applications client-serveur avec JavaScript. À partir de là, beaucoup d’améliorations ont été apportées. Ce sont ces avancées qui ont favorisé la création de React pour le rendu des composants dans les pages web lorsque vos données changent.
De même, l’un des concepts assez appréciés dans le monde JavaScript est le cycle de vie des composants. Il permet de faire passer les composants invoqués à travers différentes phases depuis sa création jusqu’à sa destruction. L’avantage avec une telle méthode est qu’elle permet de pouvoir mieux gérer les composants en décidant lequel sera mis à jour en premier, ou lequel changera d’état à tel moment ou sera détruit en dernière position.
Next.js s’appuie sur ses acquis pour offrir un meilleur rendu des applications JavaScript. Selon les développeurs du projet, il se base sur 6 principes qui peuvent être listés comme suit :
- Aucune installation à faire. Le fichier système prend la place de l’API tout : Next.js s’inspire de l’installation de Node.js afin de créer un sous-répertoire "pages" là où vos composants de haut niveau se situent. Pour Next.js, il suffit d’exécuter la commande $ npm install next –save et d’ajouter le script suivant à votre package JSON :
Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
4
5
Une fois que cela est fait, le fichier système est l’API principale. Chaque fichier .js devient un chemin qui est automatiquement traité et rendu par le serveur, ce qui sous-entend que vous pourrez avoir un rechargement à chaud du code, un rapport d’erreurs, un mappage des sources et une transpilation pour les anciens navigateurs. Lorsque vous déclenchez un évènement, le composant est récupéré. S'il définit "getInitialProps", les données sont extraites. Si une erreur survient, _error.js est rendu. Après ces différentes étapes, la fonction "pushState" est exécutée et le nouveau composant est rendu. Par ailleurs, chaque composant de haut niveau reçoit une propriété d’URL avec plusieurs API.
- Seul JavaScript est nécessaire : chaque route avec Next.js est un module ES6 qui exporte une fonction ou une classe qui étend les composants de React. Avec cette approche, souligne Zeit, un composant peut-être rendu directement, ou être importé et rendu par un autre composant de niveau supérieur. Par ailleurs, les transitions côté client entre les routes sont permises à travers un composant <link>.
- Rendu automatique par le serveur et fractionnement du code : avec Next.js, chaque composant à l'intérieur des "pages/" obtient automatiquement un rendu par le serveur avec leurs scripts à l’intérieur. En outre, lorsque le code est chargé dynamiquement Next.js récupère une représentation dynamique de la page basée sur JSON qui contient également ses scripts. Cela implique qu’il va falloir effectuer des déclarations explicites d’importations des composants de React.
- Récupération des données : Pour récupérer les données dynamiquement à partir du serveur et mettre à jour le rendu, Next.js s’appuie sur le même principe utilisé par React. Toutefois, il transpile certaines fonctionnalités comme (async/await) afin de contrôler ce le rendu par le serveur. Avec cette approche, Zeit explique que Next.js peut être utilisé avec les API REST, GraphQL et les bibliothèques de gestion des états telles que Redux. Par ailleurs, cette même méthode permet de charger différents types de données selon que le composant est rendu par le serveur ou affiché dynamiquement par le routage côté client.
- L’anticipation pour une meilleure performance : pour donner d'autres possibilités à ceux qui veulent utiliser un rendu complet de leur application en plus du rendu étape par étape en fonction des évènements déclenchés, Zeit a mis en œuvre une technique au-dessus de Next.js qui permet de récupérer à l’avance la représentation JSON du composant par l’intermédiaire d’un service.
- Un déploiement simple : Pour déployer une application Next.js, il suffit d’exécuter le code "next build" par "next start". Ensuite, vous invoquez le code "now" pour le déploiement.
Zeit déclare en conclusion que « Nous avons créé Next.js parce que nous croyons que les applications isomorphes universelles sont une grande partie de l'avenir du web ».
Source : Blog Zeit
Et vous ?
Que pensez-vous de Next.js ?
Voir aussi
Répondre avec citation
Partager