logoNext.js Français
DocumentationBlogApprendre
Introduction/Guides/Production

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 :

  • Composants serveur (Server Components) : Next.js utilise les composants serveur par défaut. Les composants serveur s'exécutent sur le serveur et ne nécessitent pas de JavaScript pour être rendus côté client. Ainsi, ils n'ont aucun impact sur 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 également envisager le chargement différé (lazy loading) des composants client et des bibliothèques tierces, lorsque cela est approprié.
  • 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.
  • Rendu statique (Static Rendering) : Next.js effectue un rendu statique des composants serveur et client sur le serveur au moment de la construction et met en cache le résultat pour améliorer les performances de votre application. Vous pouvez opter pour un rendu dynamique (Dynamic Rendering) pour des routes spécifiques si nécessaire.
  • 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, afin de 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 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

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

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

  • Composants serveur : Tirez parti des avantages de la récupération des données côté serveur en utilisant les composants serveur.
  • Gestionnaires de route (Route Handlers) : Utilisez les gestionnaires de route pour accéder à vos ressources backend depuis des composants client. Mais n'appelez pas les gestionnaires de route depuis des composants serveur pour éviter une requête serveur supplémentaire.
  • Streaming : Utilisez l'interface de chargement (Loading UI) et React Suspense pour envoyer progressivement l'interface du serveur vers le client et éviter que toute la route ne 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 également de précharger les données si approprié.
  • 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 qui n'utilisent pas fetch sont mises en cache.
  • Images statiques : Utilisez le répertoire public pour mettre automatiquement en cache les ressources statiques de votre application, par exemple les images.

Interface utilisateur et accessibilité

  • Formulaires et 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 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-a11y pour 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 à .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 de sécurité telles que le cross-site scripting, le clickjacking et d'autres attaques par injection de code.

Métadonnées et SEO

  • API de métadonnées : Utilisez l'API de métadonnées pour améliorer le référencement (SEO) de votre application en ajoutant des titres de page, des descriptions et plus encore.
  • 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 à explorer et indexer vos pages en générant des sitemaps et des fichiers robots.

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 :

Regroupement de paquets

Apprenez à optimiser les bundles serveur et client de votre application.

PWAs

Découvrez comment construire une application web progressive (PWA) avec Next.js.