Projet Next Starter ECV 2026

1. App Router Next.js 16

  • Utilisation complète du App Router (pas de Pages Router)
  • Structures d'URLs via route segments: app/clients/[id]/, app/accounts/[id]/
  • Fichiers spéciaux pour gestion d'état: loading.js, error.js

2. Server Components vs Client Components

Server Components (Par défaut):

  • app/page.js - Page d'accueil
  • app/clients/[id]/page.js - Détail client (async server component)
  • app/accounts/[id]/page.js - Détail compte (async server component)
  • app/components/ClientInfo.js - Affichage infos client
  • app/components/AccountsList.js - Liste et solde total des comptes
  • app/components/AccountDetail.js - Détails du compte
  • app/components/TransactionsList.js - Historique des transactions

Client Components ('use client'):

  • app/components/Select.js - Recherche interactive avec URL persistante
  • app/components/CreateAccountForm.js - Création de compte
  • app/components/TransferForm.js - Formulaire de transfert

Motivations:

  • Les page layouts restent server-side pour performance HTTP
  • Seules les interactions utilisateur sont client-side
  • Meilleure utilisation du caching et de la sécurité

3. Code Découpé & Réutilisable

Composants réutilisables créés:

  • ClientInfo.js - Affiche les infos de base d'un client
  • AccountsList.js - Affiche la liste et le solde total
  • AccountDetail.js - Détails du compte et autres comptes du client
  • TransactionsList.js - Historique formaté
  • CreateAccountForm.js - Formulaire d'ajout de compte (réutilisable)
  • TransferForm.js - Formulaire de transfert (réutilisable)
  • Skeletons.js - Composants de chargement réutilisables

4. Routes Handlers Existantes

Utilisation des routes API existantes:

  • /api/clients - GET (recherche) et POST
  • /api/clients/[id] - GET, PUT, DELETE
  • /api/accounts - GET et POST
  • /api/accounts/[id] - GET, PUT, DELETE
  • /api/transactions - GET
  • /api/transactions/transfer - POST

✅ Aucun nouveau handler créé - Utilisation des routes existantes uniquement

5. Gestion des États

📌 État de Chargement

Au niveau de la page:

  • Fichiers loading.js avec Suspense fallbacks
  • Skeleton components pour UX progressive
  • Fetch côté server déclaratif

Au niveau des composants:

  • États loading, creating, transferring pour actions client
  • Désactivation des formulaires pendant les requêtes

Exemple:

<Suspense fallback={<ClientDetailSkeleton />}>
<ClientInfo clientId={clientId} />
</Suspense>

❌ Gestion des Erreurs

Au niveau de la page:

  • Fichiers error.js avec Error Boundaries
  • Messages d'erreur utilisateur-friendly
  • Bouton "Réessayer" (reset)

Au niveau des composants:

  • Try-catch pour requêtes asynchrones
  • Affichage des erreurs form
  • Gestion des réponses non-OK

Fichiers créés:

  • app/clients/error.js
  • app/clients/[id]/error.js
  • app/accounts/[id]/error.js

🎯 États Vides / Pas de données

Gestion partout:

  • Comptes bancaires → "Aucun compte pour ce client"
  • Transactions → "Aucune transaction"
  • Résultats recherche → "Aucun client trouvé"
  • Transfert → Formulaire caché si < 2 comptes

Exemples:

if (!accounts || accounts.length === 0) {
return <p className="text-gray-600 bg-gray-50 p-4 rounded">
Aucun compte bancaire pour ce client
</p>;
}

6. Structure Finale

app/
├── components/
│ ├── Header.js
│ ├── Footer.js
│ ├── Select.js ← Client (recherche)
│ ├── CreateAccountForm.js ← Client (création)
│ ├── TransferForm.js ← Client (transfert)
│ ├── ClientInfo.js ← Server (infos)
│ ├── AccountsList.js ← Server (liste)
│ ├── AccountDetail.js ← Server (détails)
│ ├── TransactionsList.js ← Server (transactions)
│ └── Skeletons.js ← Composants de loading
├── clients/
│ ├── layout.js
│ ├── error.js ← Error Boundary
│ └── [id]/
│ ├── page.js ← Server component async
│ ├── error.js ← Error Boundary
│ └── loading.js ← Suspense fallback
├── about/
│ ├── page.js ← Server component async
│ ├── error.js ← Error Boundary
│ └── loading.js ← Suspense fallback
├── accounts/
│ └── [id]/
│ ├── page.js ← Server component async
│ ├── error.js ← Error Boundary
│ └── loading.js ← Suspense fallback
├── page.js ← Home
└── layout.js ← Root layout

Objectifs

✅ Performance: Server-side rendering, meilleur caching ✅ Sécurité: Clés privées Supabase côté server uniquement ✅ DX: Code plus lisible et maintenable ✅ UX: Chargements progressifs avec skeletons ✅ SEO: Rendu côté serveur pour les pages publiques