À l’occasion de la sortie de la version 13 de Next.js, nous donnons la parole à Eric Burel, formateur Next.js chez Human Coders. Il nous raconte son parcours, ses projets. Et nous donne les clefs pour mieux comprendre le fonctionnement du framework Next.js.
Peux-tu te présenter ?
Je m’appelle Eric Burel, je suis cofondateur d’une ESN (Entreprise de Services du Numérique) nommée LBKE basée à Montpellier. J’y travaille comme ingénieur indépendant et j’ai la chance d’avoir beaucoup d’activités différentes : développement web, conseil en financement, projets open source, enseignement en école d’ingénieur, et bien sûr formation pour Human Coders :)
Depuis combien de temps travailles-tu en tant que formateur chez Human Coders ?
Mai 2022, je suis un nouveau ! Je connaissais déjà Human Coders depuis quelques années, le parcours entrepreneurial des fondateurs Camille Roux et Matthieu Segret est très connu et a été inspirant pour beaucoup de Montpelliérains.
Avant tout, Next.js qu’est-ce que c’est ?
Next.js est un framework pour React et Node.js. Il fournit toutes les fonctionnalités de base qu’on peut attendre d’un framework full-stack: compilation du code, système de routage, import du CSS, possibilité d’implémenter une API… et d’autres fonctionnalités plus avancées.
Next est donc une sorte de méga-surcouche pour React, on parle aussi de méta-framework. Parmi ses concurrents, on peut citer Remix, Gatsby ou encore Vite.
Next.js a pour particularité d’être centré sur le SSR ou rendu côté serveur avec React. L’intérêt est de combiner le rendu serveur et statique, qui est très léger du point de vue de l’utilisateur, et l’interactivité de React côté client, nécessaire pour créer de SaaS complexes, dans une seule technologie.
Revenons sur les termes SSR, SSG et SPA si tu veux bien.
SSR = réaliser un rendu côté serveur, par opposition au rendu côté client à l’aide de code JavaScript. Next.js permet d’utiliser React aussi bien pour le SSR que pour le rendu client sans avoir à changer de technologie.
SSG = rendu statique côté serveur, comme pour le SSR sauf que le rendu est réalisé au moment de la compilation et non pour chaque requête. Il y a beaucoup d’autres patterns intermédiaires dont on pourra parler pendant la formation, surtout avec la version 13 de Next.js qui apporte beaucoup d’innovations sur ce plan.
SPA = single-page application, une application web qui utilise un routeur JavaScript et ne nécessite donc pas un appel au serveur lors du passage d’une page à l’autre. Next.js est un framework hybride, qui utilise le routage côté client des SPA, mais divise l’application en pages totalement indépendantes (code-splitting), pour des performances maximales.
Comment as-tu découvert Next.js et qu’est ce qui t’a donné envie de l’utiliser ?
J’ai utilisé Next.js dès la version 0, il y a très très longtemps ! Mais à l’époque Next n’était qu’un framework front-end, sans possibilité de créer une véritable API. Ça doit être autour de 2017, quand « Vercel » s’appelait encore « Zeit ». J’avais utilisé Next pour créer une landing page pour mon entreprise, à l’époque Next ne permettait de faire que du frontend. La version actuelle est infiniment plus complète, on peut maintenant développer des plateformes complètes et hautement scalables. Pourtant, créer une landing page avec Next.js reste toujours aussi agréable qu’au début.
Je me suis vraiment plongé dans Next.js début 2020, après l’ajout des « API routes » qui font de Next.js un vrai framework full-stack pour créer des applications bout-en-bout en JavaScript.
Il y en eu d’autres avant, comme MeteorJS, mais Next place la barre beaucoup plus haut en termes de qualité de l’architecture et de performances.
Quelle fonctionnalité/concept de Next.js apprécies-tu tout particulièrement ?
La possibilité d’un rendu statique, qui est très performant mais surtout qui consomme peu d’énergie. 3 milliards de requêtes sur une même page ne généreront qu’un seul calcul ! Mais contrairement aux frameworks purement statiques, Next.js peut aussi faire du rendu dynamique si le besoin se présente, et reste très flexible.
Tu es également actif dans la communauté Next.js internationale. Peux-tu nous en parler un peu ?
Assez modestement mais j’essaie d’apporter ma pierre à l’édifice :).
J’ai surtout travaillé le sujet du rendu côté serveur. J’ai pu suivre l’évolution de ce pattern et de toutes les variantes qui ont émergé au fil des années : pré-rendu de SPA, rendu statique, rendu incrémental, etc.
J’ai écrit des articles pour mieux théoriser ce fameux SSR : https://tinyurl.com/ssr-theory (un brouillon de papier de recherche, j’aurais peut-être un jour l’énergie de le faire publier). J’en ai déduit un pattern qui s’appelle le « rendu segmenté » : https://www.smashingmagazine.com/2022/07/new-pattern-jamstack-segmented-rendering/, et j’ai présenté le concept à React Advanced London 2022 (le lien n’est pas encore dispo) et prochainement à Conf 42 JavaScript.
Ce pattern devient de plus en plus courant, c’est comme ça qu’est implémentée l’internationalisation dans Next 13.
Sinon, je passe de temps en temps sur Discord pour répondre aux questions sur le canal d’aide de Next.js.
Pourquoi Next.js plutôt qu’un autre framework ?
Next.js a une capacité impressionnante de passage à l’échelle ou « scale up », mais aussi de « scale down ». En résumé, Next marche aussi bien pour un e-commerce géant que pour une page web très simple. J’apprécie ce type de technologies universelles et complètes et qui pourtant restent légères et performantes.
Si on compare Next.js avec ce qui existe dans d’autres langages, par exemple Ruby on Rails, Django ou Laravel, ou même en JavaScript avec Meteor, Redwood… on peut dire que Next appartient à une nouvelle génération de framework.
Next est fondé sur des principes modernes qui n’existaient pas il y a quelques années (ou en tout cas pas pour le grand public) : serverless, hybridation SPA/MPA, modes de rendu multiples, UI orientée composants…
Ces architectures sont avantageuses pour les applications orientées contenu, qui ont typiquement beaucoup de pages : e-commerce, médias. Elles fonctionnent aussi très bien pour les logiciels en mode SaaS.
Mais il ne faut pas oublier les développeurs : l’intérêt de Next.js est aussi « l’empowerment » des équipes frontend/fullstack. Les technologies traditionnelles sont souvent très orientées vers le backend, demandent des compétences élevées pour être utilisées correctement. Next permet aux équipes frontend de créer des points d’entrée d’API ou de gérer la configuration d’un proxy en quelques lignes de JavaScript, ce qui leur permet de gagner en autonomie. En pratique, c’est utile par exemple pour se connecter à des APIs tierces ou gérer les redirections pour le SEO.
On parle parfois de BFF : Backend For Frontend, qui est un jeu de mot avec « Best Friend Forever », meilleurs amis pour toujours.
Quels sont tes projets récents avec ce framework, quels ont été les challenges et comment Next a pu aider à les dépasser ?
Aplines
Le premier c’est Aplines, un SaaS pour la gestion des équipements électriques, qui fait désormais partie de Schneider Electric.
L’application codée pour Aplines est un logiciel qui permet d’afficher des données de masse. Les fonctionnalités serveur de Next.js ont été extrêmement utiles pour la phase de prototypage, car nous pouvions créer facilement un backend de test en attendant que le « vrai » backend Big Data soit développé par une autre équipe.
Côté frontend, Next nous fournit tous les éléments nécessaires pour créer un SaaS, ce qui nous permet de nous concentrer sur la vraie valeur ajoutée de l’application.
J’ai aussi beaucoup travaillé sur le rapport entre authentification et rendu serveur, ce qui m’a permis d’identifier des patterns pertinents dans ce contexte.
Devographics
Le second, c’est l’application d’enquête de Devographics, qui fait fonctionner les enquêtes State of JavaScript, State of CSS et State of GraphQL créées par Sacha Greif. J’ai réécrit toute la base de code pour passer de Meteor à Next.
Meteor est un framework extrêmement précurseur, qui inspire encore de nombreux projets open source. Les développeurs Meteor ont une approche agile très productive. Mais les performances… l’application d’enquête devait être redémarrée au bout de quelques heures à cause de fuites mémoire insolubles. Le passage vers Next.js nous a permis de moderniser l’architecture, tout en restant très productifs.
Quels conseils peux-tu donner à ceux·celles qui démarrent avec Next.js ou qui souhaitent se perfectionner sur Next.js ?
Il faut le plus rapidement possible s’efforcer de comprendre les spécificités de Next.js. Pas juste les fonctionnalités, mais son architecture et son mode de pensée. Next.js n’est pas un serveur + une interface React, c’est un framework fondé sur un paradigme « serverless » et « edge » et cela à un impact profond sur son mode de fonctionnement.
Vercel publie des exemples de code très intéressants :
- Ceux du dépôt Next sont centrés sur le code : https://github.com/vercel/next.js/tree/canary/examples
- Ceux du dépôt Vercel sont centrés sur l’architecture serverless/Edge en particulier : https://github.com/vercel/examples
Un projet à suivre est « Taxonomy », c’est une application qui explore toutes les nouvelles fonctionnalités de Next : https://github.com/shadcn/taxonomy
Et bien entendu, suivre la formation Next.js de Human Coders.
La nouvelle version de Next est sortie, peux-tu nous en parler un peu, et nous expliquer en quoi elle est impactante / spéciale ?
La version 13 porte bonheur, c’est une mise à jour extrêmement attendue.
Next 13 permet d’atteindre des performances proches de l’optimum théorique, en nombre de requêtes vers le serveur et en volume de calcul pour le navigateur. Par exemple : il est désormais possible de charger des données statiques dans un layout, partagé entre plusieurs pages. Cela réduit le volume de requêtes qui vont atteindre le serveur ou les APIs, parfois drastiquement.
Les Server Components sont aussi une grande avancée. Ces composants génèrent du HTML totalement statique, et fonctionnent donc aussi si le JavaScript est désactivé. En résumé, JavaScript est utilisé uniquement là où il est nécessaire, pour rendre les composants interactifs.
C’est à la fois très positif pour l’entreprise (qui paie les serveurs :)) et l’utilisateur final.
Merci beaucoup pour tes réponses Eric, et chez lectrices.eur.s si vous souhaitez vous former sur Next.js, rendez-vous sur Human Coders.
N’hésitez pas à nous contacter également si vous avez la moindre question.