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 de la construction 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 le code de votre 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 lors de chaque requête réseau.
Pendant le développement
Lors de la construction 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 : Gérez élégamment les erreurs 500 et 404.
Récupération et mise en cache des données
- Routes API : Utilisez les gestionnaires de route pour accéder à vos ressources backend et empêcher que des secrets sensibles ne soient exposés au client.
- Mise en cache des données : 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 qui n'utilisent 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 : Utilisez le répertoire
publicpour mettre automatiquement en cache les ressources statiques de votre application, par exemple les images.
Interface utilisateur et accessibilité
- Module de police : Optimisez les polices en utilisant le module de police, 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 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 : 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 vous aider à 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 construction, 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. Il s'agit d'un test simulé qui devrait être complété par l'analyse des données 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 modules et dépendances volumineux 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 :