Comment optimiser votre application Next.js pour la production
Avant de mettre votre application Next.js en production, 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 et avant la mise en production, 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. Cela signifie que seul le code nécessaire pour la page actuelle est chargé lors de la navigation. Vous pouvez également envisager le chargement différé (lazy loading) des bibliothèques tierces si nécessaire.
- Préchargement (Prefetching) : Lorsqu'un lien vers une nouvelle route entre dans le champ de vision 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 final depuis plusieurs emplacements CDN. Vous pouvez opter pour un Rendu côté serveur (Server-side Rendering) 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
- 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
getStaticPropssont mises en cache si approprié. - 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 l'intégralité de votre site.
- Images statiques (Static Images) : Utilisez le répertoire
publicpour mettre automatiquement en cache les assets statiques de votre application, par exemple les images.
Interface utilisateur et accessibilité
- Module de polices (Font Module) : Optimisez les polices en utilisant le module de polices, qui héberge automatiquement vos fichiers de police avec les autres assets 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 en utilisant le composant Image, qui optimise automatiquement les images, empêche le décalage de mise en page et les sert dans des formats modernes comme WebP. - Composant
<Script>: Optimisez les scripts tiers en utilisant 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-a11ypour détecter les problèmes d'accessibilité dès le début.
Sécurité
- Variables d'environnement (Environment Variables) : Assurez-vous que vos fichiers
.env.*sont ajoutés à.gitignoreet que seules les variables publiques sont préfixées parNEXT_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 de sécurité telles que le cross-site scripting, le clickjacking et d'autres attaques par injection de code.
Métadonnées et SEO
- Composant
<Head>: Utilisez le composantnext/headpour ajouter des titres de page, des descriptions et plus encore.
Sécurité des types
- TypeScript et Plugin TS : Utilisez TypeScript et le plugin TypeScript pour une meilleure sécurité des types et pour 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 les erreurs de build, puis exécuter 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 les axes d'amélioration. Ceci est un test simulé et devrait être complété par l'analyse des données de terrain (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 :