前言
next.js框架是主流的SSR框架，强大的开箱即用加上社区非常活跃让它能够在众多框架中脱颖而出。最近为了实现next.js页面之间来回跳转加上loading效果提升用户体验写下这篇文章，希望能够帮助到大家。
操作
首先，我们来分析一下实现原理，首先路由之间跳转启动与结束要有监听事件，用到的就是next.js的router监听事件
文章图片
有了监听事件我们就能够很好的控制页面之间的跳转。
接着我们需要一个loading bar置顶到页面最上面，这里我们会用到@tanem/react-nprogress这个插件。
yarn add @tanem/react-nprogress
文章图片
接着，我们打开这个地址，复制里面的代码到我们的项目中。
1、新建globalLoading.js
import React from 'react';
import { useNProgress } from '@tanem/react-nprogress';
const GlobalLoading = ({ isRouteChanging, }) => {
const { animationDuration, isFinished, progress } = useNProgress({
isAnimating: isRouteChanging,
})return (
<>
{`
.container {
opacity: ${isFinished ? 0 : 1};
pointerevents: none;
transition: opacity ${animationDuration}ms linear;
}
.bar {
background: #29d;
height: 2px;
left: 0;
margin-left: ${(-1 + progress) * 100}%;
position: fixed;
top: 0;
transition: margin-left ${animationDuration}ms linear;
width: 100%;
z-index: 1031;
}
.spinner {
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
display: block;
height: 100%;
opacity: 1;
position: absolute;
right: 0;
transform: rotate(3deg) translate(0px, -4px);
width: 100px;
}
`}
)
};
export default GlobalLoading;
2、修改_app.js
const MyApp = ({Component, pageProps}) => {
const router = useRouter()const [state, setState] = useState({
isRouteChanging: false,
loadingKey: 0,
})useEffect(() => {
const handleRouteChangeStart = () => {
setState((prevState) => ({
...prevState,
isRouteChanging: true,
loadingKey: prevState.loadingKey ^ 1,
}))
}const handleRouteChangeEnd = () => {
setState((prevState) => ({
...prevState,
isRouteChanging: false,
}))
}router.events.on('routeChangeStart', handleRouteChangeStart)
router.events.on('routeChangeComplete', handleRouteChangeEnd)
router.events.on('routeChangeError', handleRouteChangeEnd)return () => {
router.events.off('routeChangeStart', handleRouteChangeStart)
router.events.off('routeChangeComplete', handleRouteChangeEnd)
router.events.off('routeChangeError', handleRouteChangeEnd)
}
}, [router.events])return <>
这样就完成了所有代码的编写，接着，我们运行下项目，看看页面之间来回切换是否拥有了loading bar的效果了。
文章图片
Nice!
演示地址
总结 了解实现原理再加上社区牛人的贡献，记住常去next.js官网看看最新的动向以及新版本新加了哪些功能，比如最近next.js 12添加了middleware功能等等。
引用 【Next.js页面之间跳转添加loading bar功能】next.js loading bar视频教程
next.js middleware
