Formation Next.js : découvrir le framework de React

Quelques pistes pour se former sur Nextjs et découvrir le framework pas à pas :

1. Découvrir la documentation.
2. Explorer les fonctionnalités phares en créant une application simple.
3. Approfondir avec une formation qui propose des exemples détaillés.
4. Créer des applications avec des besoins complexes.

Comprendre l'intérêt de Next

Pour commencer à apprendre et à vous former à l'utilisation de Next.js, vous devriez commencer par comprendre l'intérêt du framework.

Pourquoi est-il si populaire et si utile pour la création de certains sites web ? Qu'est-ce qu'il vous permettrait face à l'utilisation de la librairie React ? Quels sont ses atouts principaux ?

Quelles différences avec React ?

React est d'abord une librairie, ce qui signifie qu'en l'installant, vous devrez aussi installer un paquet pour le routage (react-router-dom), un paquet pour l'internationalisation si besoin (react-i18next) et d'autres package pour répondre à chacun des besoins de création de votre application.

Next.js quant à lui vous offre dès son installation toutes les fonctionnalités que vous seriez susceptible d'utiliser avec un site web. Prêt à l'emploi.

Découverte des documentations et exemples

La documentation proposée par Next est très complète. 

Dans chacune des catégories vous pourrez retrouver les réponses à vos questions sur l'installation de Next.js, le routage, le rendu, la mise en cache...

La communauté publie régulièrement des templates de démarrage et thèmes, ce qui peut vous permettre de découvrir du code et vous en inspirer pour le développement de votre prochaine application.

Explorer les notions principales

Vous devriez commencer par explorer les possibilités avec le framework, soit en vous inspirant et en lisant le code d'applications déjà construites ou en développant de nouvelles applications simples.

Idées d'applications à créer avec Nextjs

Je vous conseille de vous entraîner à créer de premières applications simples. Par exemple, ces applications créées avec Next.js pourraient être :

Créer une page statique

Cette première application vous permettra de découvrir le routage. Commencez à découvrir la récupération de données en connectant votre page aux données d'un CMS ou d'une base de données.

Une fois cette application terminée, vous pouvez vous pencher sur Vercel pour le déploiement. C'est la solution à privilégier pour déployer une app Next.js. Vous pouvez créer et déployer une première application gratuitement.

Si vous le souhaitez, vous pouvez aussi exporter statiquement l'application (comme une app React) et la déployer sur n'importe quel serveur qui peut distribuer des fichiers statiques HTML/CSS.

Bonus : essayez de découvrir le routage plus en profondeur avec la définition d'un layout, la gestion des erreurs et les pages non trouvées.

Créer une application todo-list

Pour aller un peu plus loin, cette seconde application pourrait vous permettre de découvrir la gestion de mutation des données.

Vous pourrez ainsi découvrir les route handler ou l'utilisation des server actions pour gérer les interactions.

Cette application vous permettra également d'approfondir vos connaissances sur la gestion du cache et de récupération de données. Regardez pour ça tous les sujets de revalidation de données (variable revalidate, fonctions revalidate et revalidateTags).

Créer un blog avec des articles

Pour approfondir sur le routage, vous pouvez créer un blog avec une liste d'articles. Cette application vous permettra de découvrir les routes dynamiques, les paramètres d'URL.

Bonus : essayez d'explorer les possibilités en terme de métadonnées. Notamment avec la génération d'images et les balises openGraph.

Créer un mini site e-commerce

Là encore, vous pourrez approfondir vos connaissances sur le routage mais également sur l'authentification. Qui dit application e-commerce dit également utilisateurs connectés et inscription.

Cela vous permettra de vous pencher par exemple sur NextAuth qui est une librairie conçue pour vous aider à gérer l'authentification de votre application Next.

Echangez avec la communauté du framework

Pour poser vos questions et échanger avec d'autres développeurs Next.js, vous avez un large choix : 

• Rejoindre le discord Next.js
• Posez vos questions sur le répertoire de discussions GitHub de Next ou sur le Reddit r/nextjs

Trouver une formation Next.js

Pour en apprendre encore plus sur toutes les possibilités du framework, vous pourriez consulter une formation sur Next.

Il existe beaucoup de formations plus ou moins récentes. Je vous conseille de vous pencher sur la formation Next.js de Dyma qui comporte plusieurs avantages :

• Leçons écrites et cours vidéos
• Exemples détaillés sur chaque fonctionnalités et cas d'usage
• Projet concret développé en direct qui couvre la majorité des cas d'usage du framework
• Quizz pour valider que vous ayez compris les notions abordées
• Chat avec les étudiants de la formation pour poser vos questions à la communauté

Cette formation vous permettra d'appréhender notamment les notions de rendu serveur/client, routes dynamiques et statiques, paramètres d'URL, authentification, internationalisation, déploiement...