Le framework Next.js sort en version stable
Pour le rendu des applications React avec un routage côté client semblable aux applications universelles

Le , par Olivier Famien, Chroniqueur Actualités
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
    1
    2
    3
    4
    5
    { 
      "scripts": { 
        "dev": "next" 
      } 
    }

    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 ?

Est-ce un framework de trop ? Ou pensez-vous qu’il a sa place vu ses fonctionnalités ?

Voir aussi

Facebook améliore React et React Native avec une nouvelle API d'accessibilité pour le support des applications d'assistance

La Rubrique JavaScript, Forum JavaScript, Cours et tutoriels JavaScript, FAQ JavaScript


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de sekaijin sekaijin - Expert éminent https://www.developpez.com
le 07/11/2016 à 22:42
Par curiosité j'ai ouvert le lien et en une fraction de seconde 200% de CPU chrome figé et OS bloqué

J'ai dû rebouter. pour confirmer même chose donc après un deuxième reboot je poste ce message.
cette page Blog Zeit contient une vidéo qui affichait des rayures vertes. je crains une vidéo vérolée.

A+JYT
Offres d'emploi IT
Full stack developer - h/f
FileVirtuelle - Ile de France - Paris
Conception/dév logiciel java - H/F
Atos - Ile de France - Les Clayes-sous-Bois (78340)
HPC on-site system engineer TGCC (H/F)
Atos - Ile de France - Bruyères-le-Châtel (91680)

Voir plus d'offres Voir la carte des offres IT
Contacter le responsable de la rubrique Accueil