Rétrospective des apprentissages sur Next.js

Bonjour à tous, bienvenue au septième et dernier segment de ma veille technologique sur Next.js.

Nous voilà déjà à la fin de cette petite introduction à ce cadre logiciel complexe qui redéfinit le développement d'applications Web avec React.

Dans ce dernier article, je reviendrai sur les différents apprentissages que nous avons eus tout au long de cette série, et je donnerai mon point de vue sur l'ensemble des éléments mentionnés ainsi que les prochaines pistes d'apprentissage pour approfondir davantage ses connaissances de Next.js.

Mise en place d'un projet

Nous avons vu qu'il était assez facile et rapide de mettre en place un nouveau projet Next.js. Grâce à une seule commande et en répondant à quelques questions, on peut personnaliser la création de notre projet avec tous les fichiers requis pour pouvoir démarrer le développement d'une application en utilisant ce cadre logiciel.

Je crois qu'aujourd'hui, il est important d'avoir accès à une fonctionnalité nous permettant de rapidement mettre en place un nouveau projet avec une nouvelle technologie. De cette manière, on peut plonger directement dans le développement sans subir les soucis de configuration qu'il est possible d'avoir lorsqu'on crée les fichiers de configuration manuellement.

Le seul point négatif de cette commande magique est qu'elle n'explique pas nécessairement tout ce qui est requis pour pouvoir utiliser Next.js et ses outils. Mais comme la plupart des nouvelles technologies développées récemment qui utilisent une commande magique pour mettre en place un projet, elles rendent disponible la documentation pour une initialisation manuelle. Cela devient très utile si on veut comprendre ce que la commande met en place. Dans le cas de Next.js, la documentation pour l'installation manuelle se trouve directement sous la commande d'installation automatique dans la documentation d'installation de Next.js

De ce fait, je crois qu'il suffit de bien lire la documentation pour effectuer des changements à la configuration du projet de départ, et on peut alors profiter en toute tranquillité de la mise en place automatique d'un projet Next.js.

Routage et mise en page

Routage

J'ai présenté l'une des deux façons d'utiliser le routage de Next.js, soit le routage à partir du dossier /app, qui utilise les dossiers pour créer les routes automatiquement, et les crochets dans les noms de dossiers pour gérer des routes dynamiques.

Il existe également une autre manière de gérer le routage avec Next.js, mais il s'agit de l'ancienne méthode, différant un peu du App Router. Celle-ci est basée sur le dossier /pages et utilise plutôt le nom des fichiers pour créer les routes automatiquement. Cependant, la gestion des routes dynamiques fonctionne différemment et est un peu moins complexe grâce au hook useRouter qui permet de récupérer les paramètres facilement. Toutefois, comme il s'agit d'un composant client par défaut, il faut utiliser une autre fonction getServerSideProps et/ou un combo de getStaticProps et getStaticPaths pour aller chercher les propriétés dynamiques du composant côté serveur afin de répliquer le fonctionnement des composants serveur avec le routage à partir de l'App Router.

Next.js ne force pas le développeur à utiliser le nouveau routage, mais il en mentionne les bénéfices, notamment car il permet de gérer les dernières fonctionnalités de React. Pour plus de détails : Routage de l'app vs Routage de pages

Personnellement, j'ai opté pour la nouvelle méthode. Bien qu'elle semble plus complexe au premier abord, elle permet une communication plus simple entre les éléments statiques et dynamiques, sans avoir à créer trop de fonctions utilitaires. Je pense qu'il est plus bénéfique de commencer avec cette approche, car l'ancienne méthode pourrait très bien devenir obsolète. Il serait également intéressant de réaliser la même application avec les deux systèmes de routage pour mieux comprendre leurs différences.

Mise en page

Une autre nouveauté avec l'App Router est la séparation entre la mise en page et les fonctionnalités des pages. Ce système permet de définir des fichiers layout pour structurer la mise en page d'une section de l'application, tandis que toute la logique et les fonctionnalités de la page sont séparées dans les fichiers page.

J'apprécie cette séparation, car elle simplifie et clarifie la distinction entre les éléments statiques et dynamiques. Cependant, ce mode de fonctionnement est encore nouveau pour moi, et j'ai parfois du mal à savoir quand utiliser l'un ou l'autre. Je pense qu'en continuant à développer avec Next.js, cette distinction deviendra plus naturelle.

Traitement de données et actions serveur

Nous avons vu comment fonctionne le traitement des données avec Next.js ainsi que les actions serveur (server actions), et l'avantage de pouvoir utiliser des composants serveur qui peuvent accéder aux données de façon asynchrone et les afficher. C'est quelque chose qui n'était pas possible dans une application React classique et qui permet de grandement simplifier la gestion des données sans avoir à utiliser useEffect. Cela améliore considérablement la lisibilité du code. Nous avons également vu comment gérer des routes dynamiques et comment y accéder au sein de notre composant. Cette partie utilise une syntaxe qui n'est pas particulièrement simple à comprendre, mais qui devient logique une fois que l'on s'y est familiarisé.

Le point le plus complexe, selon moi, dans tout ce que nous avons vu jusqu'à présent avec Next.js, est la gestion entre le contenu statique, qui peut être entièrement géré côté serveur à l'aide de composants asynchrones, et le contenu dynamique, qui doit répondre aux actions de l'utilisateur. Dans l'exemple de notre petite application démo, l'action du formulaire envoie les données du formulaire à une fonction côté serveur que nous pouvons facilement définir avec "use server". Mais c'est lorsqu'on veut transmettre des données et exécuter des actions en partageant des informations spécifiques du serveur à partir d'événements côté client que les choses se compliquent. Il faut alors trouver un moyen de séparer toute la logique client de la logique serveur afin de pouvoir utiliser les événements uniquement à partir d'un composant purement dynamique.

Ce type de réflexion et de séparation de code n'est pas évident lorsqu'on est uniquement habitué à travailler avec la logique de React, où tout se passe du côté du client. C'est de loin l'élément qui me demandera le plus de temps pour m'y habituer, mais je pense que lorsque j'aurai une bonne compréhension de cette méthode de fonctionnement, il sera difficile de revenir en arrière. En effet, cela apporte tous les avantages d'une application dynamique tout en permettant un rendu statique, comme une application PHP classique, par exemple. C'est, selon moi, le meilleur des deux mondes.

Conclusion

Après cette rétrospective de mes apprentissages en mentionnant certains des points que nous avons survolés au cours de cette série sur Next.js, je peux confirmer que je trouve ce framework particulièrement intéressant et qu'il vaut la peine de s'y plonger plus profondément pour en découvrir encore plus d'avantages. Les outils qu'il met à notre disposition permettent de créer des applications plus performantes tout en conservant le dynamisme des applications React traditionnelles.

J'espère que vous avez apprécié cette immersion dans l'univers de Next.js avec moi et que cette introduction à cette technologie vous a donné envie d'explorer les possibilités qu'offrent ces outils. Pour ma part, j'ai déjà hâte de pouvoir partager mes prochaines applications construites avec ce framework et d'entendre parler des vôtres !

D'ici là, je vous dis à la prochaine !

Sources

Vercel Team, Installation - Next.js Documentation, https://nextjs.org/docs/app/getting-started/installation (Page consultée le 9 mars 2025).

Vercel Team, App Router vs Pages Router - Next.js Documentation, https://nextjs.org/docs#app-router-vs-pages-router (Page consultée le 9 mars 2025).

Vercel Team, Getting Started - Pages Router - Next.js Documentation, https://nextjs.org/docs/pages/getting-started (Page consultée le 9 mars 2025).

Vercel Team, Server Actions and Mutations - Next.js Documentation, https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations (Page consultée le 9 mars 2025).