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 :

• Découpage du code (Code-splitting) : Next.js découpe automatiquement votre code d'application par pages. Ainsi, seul le code nécessaire pour la page actuelle est chargé lors de la navigation. Vous pouvez aussi envisager un chargement différé (lazy loading) pour 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.
• Optimisation statique automatique (Automatic Static Optimization) : Next.js détermine automatiquement qu'une page est statique (peut être pré-rendue) si elle n'a pas de besoins en données bloquantes. Les pages optimisées peuvent être mises en cache et servies à l'utilisateur depuis plusieurs emplacements CDN. Vous pouvez opter pour un rendu côté serveur (Server-side Rendering) si besoin.

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

• Composant <Link> : Utilisez le composant <Link> pour la navigation côté client et le préchargement.
• Erreurs personnalisées (Custom Errors) : Gérez élégamment les erreurs 500 et 404.

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

• Routes API (API Routes) : Utilisez les gestionnaires de route pour accéder à vos ressources backend et empêcher l'exposition de secrets sensibles au client.
• 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 getStaticProps sont mises en cache si pertinent.
• Regénération statique incrémentielle (Incremental Static Regeneration) : Utilisez la regénération statique incrémentielle pour mettre à jour les pages statiques après leur construction, sans reconstruire tout votre site.
• 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é

• 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é

• 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

• Composant <Head> : Utilisez le composant next/head pour ajouter des titres de page, descriptions et plus.

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).

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 :

• Import Cost
• Package Phobia
• Bundle Phobia
• bundlejs

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.