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 (
    <>
      
      

        

          

        
      
    
  )
};

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 <>
    
    
  
}

export default wrapper.withRedux(MyApp)

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

Nice!

演示地址

总结

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

引用

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