Projet personnel en JavaScript, React et Next.js
Compétences visées : découvrir et appliquer les concepts principaux de Next.js (Server & Client Components, SSG, SSR, ISR, API Routes), apprendre le routage dynamique, la gestion de données côté serveur et la mise en page responsive avec Tailwind CSS.
Ce site permet de consulter une série d’articles courts expliquant les notions essentielles de Next.js. Chaque article est accessible via une URL dynamique, et la liste des articles est générée côté serveur pour optimiser la performance et le SEO. Le site est conçu pour être rapide, clair et responsive, afin de pouvoir servir de mini cheat sheet pour réviser ou comprendre rapidement Next.js.
L’objectif de ce projet était de créer un site interactif et éducatif très basique pour apprendre et réviser les principaux concepts de ce framework, tout en mettant en pratique les bonnes pratiques de développement front-end.
Compétences techniques
- JavaScript, TypeScript, React et Next.js (App Router)
- Server & Client Components, SSG, SSR et ISR
- API Routes pour gérer les données côté serveur
- Routage dynamique avec
[slug] - Gestion de données côté serveur et import direct depuis des fichiers JSON ou TS
- Tailwind CSS pour un design responsive et moderne
- SEO de base (titres et meta description dynamiques)
Autres compétences requises
- Structuration d’un projet Next.js complet
- Centralisation des variables d’environnement pour les constantes (ex: titre du site)
- Mise en place d’une architecture réutilisable et maintenable
- Déploiement sur Vercel avec configuration SSG/SSR correcte
Ce que ce projet m’a apporté
- Une meilleure compréhension des concepts fondamentaux de Next.js, notamment App Router, Server Components et ISR.
- L’expérience pratique de la création de pages dynamiques et de la gestion des données côté serveur.
- La maîtrise de Tailwind CSS pour un design rapide, responsive et cohérent.
- L’apprentissage du déploiement sur Vercel, et la gestion des variables d’environnement pour un projet Next.js complet.
- Une première expérience concrète de la structuration et du packaging d’un projet pour le rendre prêt à montrer dans un portfolio professionnel.
Ce projet est actuellement publié dans sa première version et je prévois d’y ajouter des fonctionnalités supplémentaires, comme un moteur de recherche d’articles, des catégories ou tags, et la possibilité d’ajouter des notes personnelles aux concepts pour un usage encore plus pratique.