Erstellen Sie in NextJS eine Ladeanzeige oder einen Fortschrittsbalken in Ihrem Anwendungsverzeichnis: eine Schritt-für-Schritt-Anleitung

Question

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?

Answer 1

更新

我发现这是新的 Next.js 13 App Directory 中的一个常见问题，并且存在一些与之相关的未解决问题，包括在 App Router Behaviours 中遇到的多个问题。

所以，我设法使用next-n-progress，但我注意到它只能通过使用链接组件起作用，因为它会触发加载以显示进度条，而且它有一个预取视口上存在的所有链接的好处。

因此，同时，对于简单的导航情况，请继续使用 Link 而不是 Router.push。