如何在 NextJS 的应用程序目录中创建加载指示器或进度条？

Question

我使用NextJS 13开发了一个大型 Web 应用程序，第一个版本是使用Pages Router。

完成几乎整个网站后，我设法迁移到App Directory。

这次迁移本质上并不是为了升级一些新的路由功能，而是我想更改在 _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 ，但我注意到它只能通过USING LINK COMPONENT起作用，因为它会触发加载以显示进度条，而且它还有一个好处是预取视图上存在的所有链接 -港口。

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