logoNext.js
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 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 :

  • 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 le rendu 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 du build 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 assets 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 à 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

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

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-a11y pour détecter les problèmes d'accessibilité dès le début.

Sécurité

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, 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 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 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 :

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.

On this page