📘 Standards de Développement Frontend

1. Objectif du document

Ce document définit les standards et bonnes pratiques applicables aux projets frontend basés sur Next.js et l’écosystème React. L’objectif est d’assurer :

• Une base de code cohérente et lisible

• Une maintenance simple dans le temps

• Une expérience développeur fluide

---

2. Principes généraux

• Respect strict des conventions du framework Next.js

• Simplicité et clarté avant sophistication

• Séparation raisonnable des responsabilités sans sur‑abstraction

• Priorité à la lisibilité et à l’évolutivité

---

3. Stack Technique Standard

• Framework : Next.js (App Router)

• Langage : TypeScript (strict: true obligatoire)

• Data fetching : TanStack Query et Axios

• État UI / local : Zustand ou Redux Toolkit

• Styling : TailwindCSS

• Composants UI : shadcn/ui

---

4. Organisation du Code

Principes

• Les pages et layouts suivent la structure App Router

• Les composants sont organisés par fonctionnalité ou par domaine UI

• Les hooks encapsulent la logique réutilisable

• Les appels API sont centralisés dans des services dédiés

Règles

• Pas d’appels HTTP directs dans les composants visuels

• Pas de logique complexe dans les fichiers page.tsx

• Les composants doivent rester simples et prévisibles

---

5. Structure de Projet

• Utiliser la structure recommandée par notre template

• Découper chaque couche (components, hooks, services) par features

• Éviter les abstractions inutiles

Notre template de la structure d’un projet frontend avec next.js

https://github.com/kaeyros-analytics-org/nextjs-starter-template

---

6. Conventions de Nommage

• Composants React : PascalCase

• Fichiers de composants : PascalCase.tsx

• Hooks : useCamelCase

• Fonctions et variables : camelCase

• Dossiers : snake-case

---

7. Gestion de l’État

• TanStack Query

  • Toute donnée venant du backend

  • Gestion du cache, du loading et des erreurs

• Zustand / Redux Toolkit

  • État UI

  • États temporaires ou locaux

---

8. Gestion des Erreurs

• Les erreurs API doivent être gérées explicitement

• Affichage utilisateur clair et non technique

• Utilisation d’Error Boundaries si nécessaire

---

9. Qualité UI & Performance

• Utiliser les composants shadcn avant d’en créer de nouveaux

• Responsive design obligatoire

• Éviter les re‑renders inutiles

• Exploiter les mécanismes natifs de Next.js (RSC, caching, streaming)

---

10. Tests

• Tests unitaires sur les hooks et fonctions critiques

• Tests E2E pour les parcours utilisateurs majeurs

---

11. Bonnes Pratiques

• Un composant = une responsabilité

• Code explicite avant commentaire

• Refactor régulier encouragé

---

✔️ Fin du document Frontend