Meilleures pratiques Next.js
Principes pour le développement avec Next.js App Router.
1. Composants serveur et client
Arbre de décision
A-t-il besoin... ?
│
├── useState, useEffect, gestionnaires d'événements
│ └── Composant client ('use client')
│
├── Récupération de données directe, pas d'interactivité
│ └── Composant serveur (par défaut)
│
└── Les deux ?
└── Séparer : parent serveur + enfant client
Par défaut
| Type | Utilisation |
|---|
| Serveur | Récupération de données, mise en page, contenu statique |
| Client | Formulaires, boutons, UI interactive |
2. Schémas de récupération de données
Stratégie de récupération
| Schéma | Utilisation |
|---|
| Par défaut | Statique (mis en cache à la construction) |
| Revalidation | ISR (rafraîchissement basé sur le temps) |
| No-store | Dynamique (chaque requête) |
Flux de données
| Source | Schéma |
|---|
| Base de données | Récupération dans le composant serveur |
| API | fetch avec mise en cache |
| Saisie utilisateur | État client + action serveur |
3. Principes de routage
Conventions de fichiers
| Fichier | Objectif |
|---|
page.tsx | UI de la route |
layout.tsx | Mise en page partagée |
loading.tsx | État de chargement |
error.tsx | Limite d'erreur |
not-found.tsx | Page 404 |
Organisation des routes
| Schéma | Utilisation |
|---|
Groupes de routes (nom) | Organiser sans URL |
Routes parallèles @slot | Pages multiples au même niveau |
Interception (.) | Superpositions modales |
4. Routes API
Gestionnaires de routes
| Méthode | Utilisation |
|---|
| GET | Lire des données |
| POST | Créer des données |
| PUT/PATCH | Mettre à jour des données |
| DELETE | Supprimer des données |
Bonnes pratiques
- Valider les entrées avec Zod
- Renvoyer des codes de statut appropriés
- Gérer les erreurs avec élégance
- Utiliser l'environnement d'exécution Edge si possible
5. Principes de performance
Optimisation des images
- Utiliser le composant
next/image
- Définir la priorité pour le contenu au-dessus de la ligne de flottaison
- Fournir un placeholder flou
- Utiliser des tailles responsives
Optimisation du bundle
- Importations dynamiques pour les composants lourds
- Division de code basée sur les routes (automatique)
- Analyser avec l'analyseur de bundle
6. Métadonnées
Statique vs Dynamique
| Type | Utilisation |
|---|
| Export statique | Métadonnées fixes |
| generateMetadata | Dynamique par route |
Balises essentielles
- title (50-60 caractères)
- description (150-160 caractères)
- Images Open Graph
- URL canonique
7. Stratégie de mise en cache
Couches de cache
| Couche | Contrôle |
|---|
| Requête | options fetch |
| Données | revalidate/tags |
| Route entière | configuration de route |
Revalidation
| Méthode | Utilisation |
|---|
| Basée sur le temps | revalidate: 60 |
| À la demande | revalidatePath/Tag |
| Sans cache | no-store |
8. Actions serveur
Cas d'utilisation
- Soumissions de formulaires
- Mutations de données
- Déclencheurs de revalidation
Bonnes pratiques
- Marquer avec 'use server'
- Valider toutes les entrées
- Renvoyer des réponses typées
- Gérer les erreurs
9. Anti-patrons
| ❌ À éviter | ✅ À faire |
|---|
| 'use client' partout | Serveur par défaut |
| Récupération dans les composants client | Récupération dans le serveur |
| Ignorer les états de chargement | Utiliser loading.tsx |
| Ignorer les limites d'erreur | Utiliser error.tsx |
| Gros bundles client | Importations dynamiques |
10. Structure du projet
app/
├── (marketing)/ # Groupe de routes
│ └── page.tsx
├── (dashboard)/
│ ├── layout.tsx # Mise en page du tableau de bord
│ └── page.tsx
├── api/
│ └── [resource]/
│ └── route.ts
└── components/
└── ui/
Rappel : Les composants serveur sont la valeur par défaut pour une bonne raison. Commencez par là, ajoutez un composant client uniquement lorsque nécessaire.