在 NextJS 的應用程式目錄中建立載入指示器或進度條：逐步指南

Question

我使用 NextJS 13 開發了一個大型 Web 應用程序，第一個版本使用 Pages Router。

完成幾乎整個網站後，我成功遷移到應用程式目錄。

此遷移本質上並不是為了升級某些新的路由功能，而是我想更改在 _app.tsx 中導入的 SASS 大型編譯文件，以獲得更好的網站加載時間。

由於載入對於這個專案來說是一個很大的問題，所以我開始使用 MUI 來設定每個元件的樣式，這只是一個 CSS-in-JS 解決方案。

但是我在新的應用程式目錄中發現的問題是路由器事件，我有一個來自next-n-progress 套件的進度條指示器，但現在它不起作用，用戶單擊鏈接，應用程式需要一些時間來加載下一頁。

該問題對於SSR 頁面來說不是問題，因為我已將loading.tsx 檔案放在每個頁面的根目錄中，但對於具有客戶端配置的頁面來說，該問題仍然存在。

例如主頁、登入和註冊等

我嘗試了另一個支援新應用程式目錄的進度欄包，但它根本沒有顯示。

這是負責佈局的元件： GitHub 元件固定連結

有什麼方法可以使用這個新的 NextJS 13 更新來建立新的進度列嗎？

Answer 1

更新

我發現這是新的 Next.js 13 App Directory 中的一個常見問題，並且存在一些與之相關的未解決問題，包括在 App Router Behaviours 中遇到的多個問題。

所以，我設法使用next-n-progress，但我注意到它只能透過使用連結元件起作用，因為它會觸發載入以顯示進度條，而且它有一個預取視口上存在的所有連結的好處。

因此，同時，對於簡單的導航情況，請繼續使用 Link 而不是 Router.push。