如何在 Next JS 中创建进度条？答案

【问题标题】：How to create a progress bar in Next JS?如何在 Next JS 中创建进度条？
【发布时间】：2021-09-09 15:07:53
【问题描述】：

我正在尝试创建一个位于网站顶部的进度条，每次加载页面时，您都会看到进度条填满。

我想在 Next JS 中实现相同的功能，但我很难做到。加载栏有很多库，但它们都要求 value 道具，它基本上表明栏被填充了多少，但我找不到动态获取此 value 道具的方法。我不想硬编码它，我希望它在页面加载时填满。

有什么方法可以动态找到value 属性的值吗？

【问题讨论】：

这能回答你的问题吗？ Loading Screen on next js page transition

标签： reactjs next.js loading

【解决方案1】：

有几种方法可以做到这一点，nextjs 有路由器导入，所以你可以使用事件see here

考虑到这一点，您可以创建可视组件，如果您真的想在每次页面更改时显示，您可以将其与 _app.tsx/jsx 和 useEffect 挂钩一起使用。只是不要忘记在听完事件后清理它们

This answer 很好地展示了如何实现它，它是一个很好的参考并且非常通用，因此您可以根据需要进行自定义

【讨论】：

【解决方案2】：

试试 __app.js 或 __app.tsx 从“下一个/路由器”导入路由器；从“nprogress”导入 NProgress；为头部添加 css

Router.events.on('routeChangeStart', () => NProgress.start()); Router.events.on('routeChangeComplete', () => NProgress.done()); Router.events.on('routeChangeError', () => NProgress.done());

会工作

【讨论】：