Work

Learn Next.js 14

Next.js 14
Typescript
Vercel

Next.js est un framework React pour créer des applications web full-stack. Il offre des fonctionnalités telles que le routage, le rendu, la récupération de données, le stylisme et les optimisations. Il supporte à la fois le nouveau App Router, avec des fonctionnalités comme les composants serveur et le streaming, et l'ancien Pages Router pour les applications React rendues côté serveur.

Learn Next.js 14 - Dashboard

Dans le cadre de mon apprentissage des technologies web modernes, j’ai suivi le cours interactif gratuit sur le App Router de Next.js. Ce tutoriel m’a permis de maîtriser les principales fonctionnalités de Next.js en construisant une application web full-stack.

Projet Réalisé

Au cours de ce tutoriel, j’ai développé une version simplifiée d’un tableau de bord financier comprenant :

  • Une page d’accueil publique
  • Une page de connexion
  • Des pages de tableau de bord protégées par authentification
  • La fonctionnalité permettant aux utilisateurs d’ajouter, modifier et supprimer des factures
  • Un accompagnement pour la mise en place d’une base de données a également été inclus dans une des sections ultérieures du cours.

Compétences Acquises

Voici les principales compétences et connaissances que j’ai développées grâce à ce tutoriel :

  • Stylisation_ : Les différentes méthodes de stylisation des applications Next.js.
  • Optimisations : Techniques d’optimisation des images, liens et polices.
  • Routage : Création de mises en page et de pages imbriquées à l’aide du routage basé sur le système de fichiers.
  • Récupération de Données : Configuration d’une base de données sur Vercel et meilleures pratiques pour la récupération et le streaming de données.
  • Recherche et Pagination : Implémentation de la recherche et de la pagination via les paramètres d’URL.
  • Mutation de Données : Utilisation des actions serveur de React pour modifier les données et revalider le cache Next.js.
  • Gestion des Erreurs : Gestion des erreurs générales et des erreurs 404.
  • Validation des Formulaires et Accessibilité : Validation des formulaires côté serveur et conseils pour améliorer l’accessibilité.
  • Authentification : Ajout d’une authentification à l’application en utilisant NextAuth.js et Middleware.
  • Métadonnées : Ajout de métadonnées et préparation de l’application pour le partage sur les réseaux sociaux.
  • Prérequis
  • Ce cours nécessite une compréhension de base de React et JavaScript. Pour les débutants, il est recommandé de suivre le cours “React Foundations” pour se familiariser avec les fondamentaux de React.

Conclusion

Ce tutoriel m’a fourni les compétences essentielles pour commencer à construire des applications Next.js full-stack de manière professionnelle. Il m’a également permis de mieux comprendre l’écosystème Next.js et de renforcer mes capacités en développement web. J’ai par la suite utilisé Vercel pour le déploiement de ce tutoriel.