devIndicators

devIndicators ermöglicht es Ihnen, die Bildschirm-Indikatoren zu konfigurieren, die während der Entwicklung Kontext über die aktuelle Route geben.

  devIndicators: {
    appIsrStatus?: boolean, // Standardwert ist true
    buildActivity?: boolean, // Standardwert ist true
    buildActivityPosition?: 'bottom-right'
    | 'bottom-left'
    | 'top-right'
    | 'top-left', // Standardwert ist 'bottom-right'
  },

appIsrStatus (Statischer Indikator)

Next.js zeigt einen statischen Indikator in der unteren Ecke des Bildschirms, der signalisiert, ob eine Route zur Bauzeit vorgerendert wird. Dies erleichtert das Verständnis, ob eine Route statisch oder dynamisch ist, und hilft Ihnen zu erkennen, ob eine Route sich von statischem Rendering abmeldet.

Sie können den Indikator vorübergehend ausblenden, indem Sie auf "Indikator schließen" klicken. Dies wird Ihre Präferenz für 1 Stunde in localStorage speichern. Um ihn dauerhaft zu deaktivieren, können Sie die Konfigurationsoption in next.config.js verwenden:

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  devIndicators: {
    appIsrStatus: false,
  },
}
 
export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  devIndicators: {
    appIsrStatus: false,
  },
}
 
module.exports = nextConfig

buildActivity (Kompilierungsindikator)

Wenn Sie Ihren Code bearbeiten und Next.js die Anwendung kompiliert, erscheint ein Kompilierungsindikator in der unteren rechten Ecke der Seite.

Hinweis: Dieser Indikator ist nur im Entwicklungsmodus vorhanden und wird nicht erscheinen, wenn die App im Produktionsmodus erstellt und ausgeführt wird.

In manchen Fällen kann dieser Indikator auf Ihrer Seite falsch positioniert sein, zum Beispiel wenn er mit einem Chat-Launcher in Konflikt steht. Um seine Position zu ändern, öffnen Sie next.config.js und setzen Sie buildActivityPosition im devIndicators-Objekt auf bottom-right (Standard), bottom-left, top-right oder top-left:

module.exports = {
  devIndicators: {
    buildActivityPosition: 'bottom-right',
  },
}

In manchen Fällen ist dieser Indikator möglicherweise nicht nützlich für Sie. Um ihn zu entfernen, öffnen Sie next.config.js und deaktivieren Sie die buildActivity-Konfiguration im devIndicators-Objekt:

module.exports = {
  devIndicators: {
    buildActivity: false,
  },
}

Fehlerbehebung

Statische Route zeigt Indikator nicht an

Wenn Sie erwarten, dass eine Route statisch ist und der Indikator aktiviert, aber nicht sichtbar ist, hat die Route sich wahrscheinlich vom statischen Rendering abgemeldet.

Sie können bestätigen, ob eine Route statisch oder dynamisch ist, indem Sie Ihre Anwendung mit next build --debug erstellen und die Ausgabe in Ihrem Terminal überprüfen. Statische (oder vorgerenderte) Routen zeigen ein ○-Symbol, während dynamische Routen ein ƒ-Symbol anzeigen. Zum Beispiel:

Route (app)                              Size     First Load JS
┌ ○ /_not-found                          0 B               0 kB
└ ƒ /products/[id]                       0 B               0 kB
 
○  (Statisch)   als statischer Inhalt vorgerendert
ƒ  (Dynamisch)  bei Bedarf serverseitig gerendert

Es gibt zwei Gründe, warum eine Route sich vom statischen Rendering abmelden könnte:

• Die Verwendung von Dynamischen APIs, die Laufzeitinformationen benötigen.
• Eine nicht zwischengespeicherte Datenanfrage, wie ein Aufruf eines ORM oder Datenbankdreibers.

Überprüfen Sie Ihre Route auf diese Bedingungen, und wenn Sie die Route nicht statisch rendern können, erwägen Sie die Verwendung von loading.js oder <Suspense />, um Streaming zu nutzen.