Erstellen Sie in NextJS eine Ladeanzeige oder einen Fortschrittsbalken in Ihrem Anwendungsverzeichnis: eine Schritt-für-Schritt-Anleitung
Ich habe eine große Webanwendung mit NextJS 13 entwickelt, die erste Version mit Pages Router.
Nachdem ich fast die gesamte Website fertiggestellt hatte, konnte ich erfolgreich zum Anwendungsverzeichnis migrieren.
Bei dieser Migration geht es nicht unbedingt darum, einige neue Routing-Funktionen zu aktualisieren, aber ich möchte die großen SASS-kompilierten Dateien ändern, die in _app.tsx importiert werden, um bessere Ladezeiten der Website zu erzielen.
Da das Laden bei diesem Projekt ein großes Problem darstellte, begann ich, MUI zum Stylen jeder Komponente zu verwenden, was lediglich eine CSS-in-JS-Lösung war.
Aber das Problem, das ich im neuen App-Verzeichnis gefunden habe, sind die Router-Ereignisse. Ich habe eine Fortschrittsbalkenanzeige vom next-n-progress-Paket, aber jetzt funktioniert es nicht mehr, der Benutzer klickt auf den Link und die App muss Take etwas Zeit, um die nächste Seite zu laden.
Dieses Problem betrifft SSR-Seiten nicht, da ich die Datei loading.tsx im Stammverzeichnis jeder Seite abgelegt habe, das Problem besteht jedoch weiterhin für Seiten mit Client-Konfiguration.
Wie Homepage, Login und Registrierung usw.
Ich habe ein anderes Fortschrittsbalkenpaket ausprobiert, das das neue Anwendungsverzeichnis unterstützt, aber es wurde überhaupt nicht angezeigt.
Dies ist die für das Layout verantwortliche Komponente: GitHub-Komponenten-Permalink
Gibt es eine Möglichkeit, mit diesem neuen NextJS 13-Update einen neuen Fortschrittsbalken zu erstellen?
