在 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。