devIndicators

devIndicators permet de configurer l'indicateur à l'écran qui fournit des informations contextuelles sur la route actuellement visualisée pendant le développement.

  devIndicators: false | {
    position?: 'bottom-right'
    | 'bottom-left'
    | 'top-right'
    | 'top-left', // par défaut 'bottom-left',
  },

Définir devIndicators sur false masquera l'indicateur, mais Next.js continuera à afficher les erreurs de construction ou d'exécution rencontrées.

Dépannage

L'indicateur ne marque pas une route comme statique

Si vous vous attendez à ce qu'une route soit statique et que l'indicateur l'a marquée comme dynamique, il est probable que la route ait choisi de ne pas utiliser le rendu statique.

Vous pouvez confirmer si une route est statique ou dynamique en construisant votre application avec next build --debug, puis en vérifiant la sortie dans votre terminal. Les routes statiques (ou pré-rendues) afficheront un symbole ○, tandis que les routes dynamiques afficheront un symbole ƒ. Par exemple :

Route (app)                              Size     First Load JS
┌ ○ /_not-found                          0 B               0 kB
└ ƒ /products/[id]                       0 B               0 kB

○  (Statique)   pré-rendu en tant que contenu statique
ƒ  (Dynamique)  rendu côté serveur à la demande

Il existe deux raisons pour lesquelles une route pourrait ne pas utiliser le rendu statique :

• La présence d'APIs dynamiques qui dépendent d'informations en temps réel.
• Une requête de données non mise en cache, comme un appel à un ORM ou un pilote de base de données.

Vérifiez votre route pour ces conditions, et si vous ne pouvez pas rendre la route statiquement, envisagez d'utiliser loading.js ou <Suspense /> pour tirer parti du streaming.

Historique des versions