Apprendre Next.js en 3 étapes simples
Les créateurs de Next offrent d’excellentes ressources pour apprendre par soi-même : la documentation officielle et le tutoriel Next.js Learn.
Le désavantage d’avoir autant de contenu, c’est qu’on peut se sentir débordé et ne plus savoir par où commencer !
J’ai rejoint Human Coders en 2022, en tant que formateur Next.js. J’ai mis en place une formation à Next.js en 3 jours, en m’appuyant sur mes années d’expérience avec cette technologie.
Et voici les 3 étapes que je recommande pour apprendre Next.js efficacement.
Etape 1 : découvrir Next en créant quelques pages
Le routeur fondé sur le système de fichiers de Next.js n’est pas juste un choix esthétique pour se différencier des autres frameworks.
Cette approche a de nombreux avantages techniques: la possibilité de découper le code entre les différentes pages, la réduction de la taille du bundle (le code JS compilé de l’application), la possibilité de mixer le rendu côté serveur et la navigation côté client…
C’est un bon point de départ pour commencer votre apprentissage de Next : créer quelques pages. Après tout Next est un framework web, et les sites web sont composés de pages !
Quelques idées (un peu fun) si vous êtes en panne d’inspiration : créer un CV en ligne pour votre animal de compagnie, un site avec une citation par jour de l’année ou encore un e-commerce qui vend des photos de logements sympas, mais juste les photos.
Même si cette étape paraît simple, y passer une bonne journée n’est pas de trop, surtout si vous souhaitez mettre en place le style de l’application, les polices d’écriture etc.
Etape 2 : comprendre le rendu serveur
Une “Single Page Application” est un site web qui s’appuie sur le JavaScript côté client, dans le navigateur, pour créer une expérience utilisateur hautement interactive.
“Single Page” signifie qu’il y a littéralement un seul fichier HTML dont le rôle est de télécharger le code JavaScript de la page. Ce code JavaScript fait ensuite fonctionner toute l’application, un peu comme un “.exe” pour un logiciel Windows.
Les SPA sont très bien pour les logiciels dans le navigateur en mode “SaaS”, mais elles sont moins intéressantes pour les applications orientées contenu: e-commerce, blogs, landing page. Exécuter une grande quantité de code JavaScript pour afficher la page peut être lent et innefficace.
Le rendu côté serveur, qu’il soit à la requête (dynamique, SSR) ou à la compilation (statique, SSG) est une technique d’optimisation apportée par les frameworks modernes tels que Next.js.
Le rendu côté serveur consiste comme son nom l’indique à réaliser un pré-rendu côté serveur, plutôt que de faire tous les calculs dans le navigateur avec du JavaScript client.
C’est très efficace pour afficher rapidement le contenu critique de la page, optimiser le SEO ou encore supporter des appareils moins performants comme certains mobiles.
Le rendu statique, c’est la même idée, mais le rendu est calculé dès la compilation lors de la mise en ligne de l’application. Cela réduit très fortement le coût d’hébergement du site, car on réalise le calcul une fois pour toute et non à chaque requête de l’utilisateur.
Le SSR et le SSG sont les fonctionnalités les plus complexes de Next.js. Et pour compliquer encore les choses, les terminologies ont beaucoup évolué au fil du temps.
Il faut passer au moins une journée sur ces notions pour saisir leur intérêt, on les comprend beaucoup mieux en pratiquant.
Etape 3: comprendre les paradigmes “Serverless” et Backend-for-Frontend
Next n’est pas tout à fait un framework frontend. Il s’agit plus précisément d’un framework “backend pour le frontend” (backend-for-frontend ou BFF pour les intimes).
Next propose donc des fonctionnalités backend, optimisées pour alimenter une application web avec une interface graphique, c’est-à-dire un frontend.
Les Route Handlers (précédemment API Routes) permettent d’implémenter les fonctionnalités serveur de base : authentifier l’utilisateur, récupérer des données depuis une base de données, traiter les paiements.
Plus récemment, les React Server Components et les Server Actions permettent d’atteindre le même objectif, mais sans avoir à créer un point d’entrée d’API explicite, et avec quelques optimisations qui réduisent le besoin d’exécuter du JavaScript dans le navigateur.
Par ailleurs, Next.js, et la société qui gère le développement du framework, Vercel, promeuvent un paradigme appelé “serverless”.
Plutôt que d’avoir un gros serveur qui tourne en permanence, chaque page et chaque point d’entrée d’API d’une application Next se comporte comme un petit serveur autonome.
Par exemple, en général, les utilisateurs se connectent plus souvent qu’ils ne s’inscrivent. Avec une approche serverless, la logique de connexion peut passer à l’échelle plus rapidement que la logique d’inscription, automatiquement !
Le serverless est clairement un concept avancé, de même que toutes les fonctionnalités serveur de Next.js. Là encore, les concepts peuvent faire peur mais la pratique aide beaucoup, une bonne journée d’essais/erreurs permet de saisir les grandes lignes.
Conclusion: non, il ne faut pas plusieurs années pour apprendre Next.js, seulement 3 jours!
J’ai construit mon expertise de Next.js d’abord en travaillant sur le projet Aplines en tant que lead front-end freelance, le produit a depuis été rattaché à Schneider Electrics. J’ai ensuite poursuivi la transition de l’application d’enquête du State of JavaScript (et par conséquent des State of CSS, HTML, React et GraphQL) de Meteor vers Next.js, en tant que membre du collectif Devographics.
Si je me permets de vous ennuyer avec un extrait de mon CV, c’est parce que je souhaite montrer que la maîtrise d’une technologie moderne n’est pas juste un moyen de suivre la dernière mode, cela amène un véritable succès professionnel. Le prix à payer est plusieurs années d’apprentissage, j’ai passé beaucoup de temps à saisir les enjeux du rendu statique par exemple.
Mais il n’est pas pour autant nécessaire que vous passiez autant de temps à apprendre Next.js ! Tout cela m’a pris des années car j’ai découvert ces fonctionnalités au fur et à mesure qu’elles ont été ajoutées à Next : les bases du framework en 2017, les API routes en 2019, le App Router en 2023...
Je pense qu’aujourd’hui, 3 jours seulement sont nécessaires pour apprendre les bases du développement web full-stack avec Next.js. Vous ne deviendrez pas soudainement un expert qui connaît les moindres détails de l’outil, mais vous serez en mesure de créer des applications satisfaisantes et très performantes.
Il faut pour cela planifier un peu votre apprentissage, et surtout découvrir le framework étape par étape. J’espère que cet article vous aidera à trouver le rythme qui vous convient !
Cet article est une traduction et une mise à jour de mon article en anglais “3 steps to learn Next.js efficiently”
Quelques ressources pour approfondir
Vous avez aimé cet article? Vous aimerez peut-être mes formations Next.js. Je suis un ingénieur indépendant avec plusieurs années d’expérience dans la conception d’architectures frontend scalables, et j’aime par dessus tout partager les connaissances acquises au cours de mes expériences et mes recherches.
Découvrez ma formation Next.js en 3 jours
Une introduction à Next.js pour bien saisir les enjeux du développement web moderne hybridant les logiques client et serveur.
Mes masterclass en 1 journée sur des sujets spécifiques
Vous codez déjà avec Next.js ? Allons plus loin avec des cours avancés dédiés à des problématiques techniques complexes.
- Next.js avancé — JavaScript côté client : https://www.humancoders.com/formations/next-js-avance-js-client
- Next.js avancé — personnalisation des sites : https://www.humancoders.com/formations/next-js-avance-personnalisation
Une playlist Youtube où l’on suit le tutoriel Next.js Learn, en français
Vous êtes plutôt vidéo ? Voici une petite playlist où l’on suit le tutoriel officiel Next.js Learn (contenu gratuit et en français)
Et mes cours vidéos (en anglais)
- Blazing fast Next.js with React Server Components
- Next.js Patterns, une collection de cours vidéos avancés
