Checklist de production

Avant de mettre en production votre application Next.js, il existe certaines optimisations et bonnes pratiques que vous devriez envisager d'implémenter pour offrir la meilleure expérience utilisateur, performance et sécurité.

Cette page fournit des bonnes pratiques que vous pouvez utiliser comme référence lors du développement de votre application, avant la mise en production, et après le déploiement - ainsi que les optimisations automatiques de Next.js dont vous devriez être conscient.

Optimisations automatiques

Ces optimisations Next.js sont activées par défaut et ne nécessitent aucune configuration :

Composants serveur (Server Components) : Next.js utilise par défaut les composants serveur. Ces composants s'exécutent sur le serveur et ne nécessitent pas de JavaScript pour être rendus côté client. Ainsi, ils n'impactent pas la taille de vos bundles JavaScript côté client. Vous pouvez ensuite utiliser des composants client (Client Components) si nécessaire pour l'interactivité.
Découpage du code (Code-splitting) : Les composants serveur permettent un découpage automatique du code par segments de route. Vous pouvez aussi envisager un chargement différé (lazy loading) pour les composants client et les bibliothèques tierces, lorsque c'est pertinent.
Préchargement (Prefetching) : Lorsqu'un lien vers une nouvelle route entre dans le viewport de l'utilisateur, Next.js précharge la route en arrière-plan. Cela rend la navigation vers de nouvelles routes quasi instantanée. Vous pouvez désactiver le préchargement si nécessaire.
Rendu statique (Static Rendering) : Next.js effectue un rendu statique des composants serveur et client sur le serveur au moment du build et met en cache le résultat pour améliorer les performances. Vous pouvez opter pour un rendu dynamique (Dynamic Rendering) pour des routes spécifiques si besoin.
Mise en cache (Caching) : Next.js met en cache les requêtes de données, le résultat du rendu des composants serveur et client, les ressources statiques et plus encore, pour réduire le nombre de requêtes réseau vers votre serveur, base de données et services backend. Vous pouvez désactiver la mise en cache si nécessaire.

Ces paramètres par défaut visent à améliorer les performances de votre application et à réduire le coût et la quantité de données transférées à chaque requête réseau.

Pendant le développement

Lors du développement de votre application, nous recommandons d'utiliser les fonctionnalités suivantes pour garantir les meilleures performances et expérience utilisateur :

Routage et rendu

Layouts : Utilisez les layouts pour partager l'UI entre les pages et activer le rendu partiel (partial rendering) lors de la navigation.
Composant <Link> : Utilisez le composant <Link> pour la navigation côté client et le préchargement.
Gestion des erreurs (Error Handling) : Gérez élégamment les erreurs globales (catch-all errors) et les erreurs 404 en production en créant des pages d'erreur personnalisées.
Modèles de composition (Composition Patterns) : Suivez les modèles de composition recommandés pour les composants serveur et client, et vérifiez le placement de vos limites "use client" pour éviter d'augmenter inutilement la taille de votre bundle JavaScript côté client.
Fonctions dynamiques (Dynamic Functions) : Soyez conscient que les fonctions dynamiques comme cookies() et la prop searchParams forceront toute la route à utiliser le rendu dynamique (Dynamic Rendering) (ou toute votre application si utilisées dans le Root Layout). Assurez-vous que l'usage des fonctions dynamiques est intentionnel et encapsulez-les dans des limites <Suspense> si nécessaire.

Bon à savoir : Le prérendu partiel (Partial Prerendering) (expérimental) permettra à des parties d'une route d'être dynamiques sans forcer toute la route à utiliser le rendu dynamique.

Récupération et mise en cache des données

Composants serveur (Server Components) : Profitez des avantages de la récupération de données côté serveur avec les composants serveur.
Gestionnaires de route (Route Handlers) : Utilisez les gestionnaires de route pour accéder à vos ressources backend depuis les composants client. Mais n'appelez pas les gestionnaires de route depuis les composants serveur pour éviter une requête serveur supplémentaire.
Streaming : Utilisez l'UI de chargement et React Suspense pour envoyer progressivement l'UI du serveur vers le client, et empêcher que toute la route soit bloquée pendant la récupération des données.
Récupération parallèle des données (Parallel Data Fetching) : Réduisez les cascades réseau en récupérant les données en parallèle si nécessaire. Envisagez aussi de précharger les données si pertinent.
Mise en cache des données (Data Caching) : Vérifiez si vos requêtes de données sont mises en cache ou non, et activez la mise en cache si nécessaire. Assurez-vous que les requêtes n'utilisant pas fetch sont mises en cache.
Images statiques (Static Images) : Utilisez le répertoire public pour mettre automatiquement en cache les ressources statiques de votre application, comme les images.

UI et accessibilité

Formulaires et validation (Forms and Validation) : Utilisez les actions serveur (Server Actions) pour gérer les soumissions de formulaires, la validation côté serveur et la gestion des erreurs.

Module de polices (Font Module) : Optimisez les polices avec le module de polices, qui héberge automatiquement vos fichiers de police avec les autres ressources statiques, supprime les requêtes réseau externes et réduit le décalage de mise en page (layout shift).
Composant <Image> : Optimisez les images avec le composant Image, qui optimise automatiquement les images, empêche les décalages de mise en page et les sert dans des formats modernes comme WebP ou AVIF.
Composant <Script> : Optimisez les scripts tiers avec le composant Script, qui diffère automatiquement les scripts et les empêche de bloquer le thread principal.
ESLint : Utilisez le plugin intégré eslint-plugin-jsx-a11y pour détecter tôt les problèmes d'accessibilité.

Sécurité

Marquage (Tainting) : Empêchez l'exposition de données sensibles au client en marquant les objets de données et/ou valeurs spécifiques.
Actions serveur (Server Actions) : Assurez-vous que les utilisateurs sont autorisés à appeler les actions serveur. Consultez les bonnes pratiques de sécurité recommandées.

Variables d'environnement (Environment Variables) : Assurez-vous que vos fichiers .env.* sont ajoutés à .gitignore et que seules les variables publiques sont préfixées par NEXT_PUBLIC_.
Politique de sécurité du contenu (Content Security Policy) : Envisagez d'ajouter une politique de sécurité du contenu pour protéger votre application contre diverses menaces comme le cross-site scripting, le clickjacking et autres attaques par injection de code.

Métadonnées et SEO

API Métadonnées (Metadata API) : Utilisez l'API Métadonnées pour améliorer le référencement (SEO) de votre application en ajoutant des titres de page, descriptions et plus.
Images Open Graph (OG) : Créez des images OG pour préparer votre application au partage sur les réseaux sociaux.
Sitemaps et Robots : Aidez les moteurs de recherche à crawler et indexer vos pages en générant des sitemaps et fichiers robots.

Sécurité des types

TypeScript et Plugin TS : Utilisez TypeScript et le plugin TypeScript pour une meilleure sécurité des types et détecter les erreurs plus tôt.

Avant la mise en production

Avant la mise en production, vous pouvez exécuter next build pour construire votre application localement et détecter d'éventuelles erreurs, puis next start pour mesurer les performances de votre application dans un environnement similaire à la production.

Core Web Vitals

Lighthouse : Exécutez Lighthouse en mode navigation privée pour mieux comprendre comment vos utilisateurs vivront votre site et identifier des axes d'amélioration. Ceci est un test simulé et devrait être complété par l'analyse de données réelles (comme les Core Web Vitals).

Hook useReportWebVitals : Utilisez ce hook pour envoyer les données des Core Web Vitals à vos outils d'analytique.

Analyse des bundles

Utilisez le plugin @next/bundle-analyzer pour analyser la taille de vos bundles JavaScript et identifier les gros modules et dépendances qui pourraient impacter les performances de votre application.

De plus, les outils suivants peuvent vous aider à comprendre l'impact de l'ajout de nouvelles dépendances à votre application :

Après le déploiement

Selon où vous déployez votre application, vous pourriez avoir accès à des outils et intégrations supplémentaires pour surveiller et améliorer les performances de votre application.

Pour les déploiements sur Vercel, nous recommandons :

Analytics : Un tableau de bord analytique intégré pour comprendre le trafic de votre application, incluant le nombre de visiteurs uniques, vues de pages et plus.
Speed Insights : Insights de performance en conditions réelles basés sur les données des visiteurs, offrant une vue pratique des performances de votre site sur le terrain.
Logging : Logs d'exécution et d'activité pour déboguer et surveiller votre application en production. Alternativement, consultez la page d'intégrations pour une liste d'outils et services tiers.

Bon à savoir :

Pour une compréhension complète des bonnes pratiques pour les déploiements en production sur Vercel, incluant des stratégies détaillées pour améliorer les performances de site, référez-vous à la Checklist de production Vercel.

Suivre ces recommandations vous aidera à construire une application plus rapide, fiable et sécurisée pour vos utilisateurs.

On this page