Next.js-页面顶部添加loading bar功能

前言

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 (
    <>
      <style jsx>{`
        .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;
        }
      `}</style>
      <div className="container">
        <div className="bar">
          <div className="spinner" />
        </div>
      </div>
    </>
  )
};

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 <>
    <GlobalLoading isRouteChanging={state.isRouteChanging} key={state.loadingKey} />
    <Component {...pageProps} />
  </>
}

export default wrapper.withRedux(MyApp)

这样就完成了所有代码的编写，接着，我们运行下项目，看看页面之间来回切换是否拥有了loading bar的效果了。

Nice!

演示地址

总结

了解实现原理再加上社区牛人的贡献，记住常去next.js官网看看最新的动向以及新版本新加了哪些功能，比如最近next.js 12添加了middleware功能等等。

引用

next.js loading bar视频教程
next.js middleware