Next.js页面之间跳转添加loading bar功能

前言

next.js框架是主流的SSR框架,强大的开箱即用加上社区非常活跃让它能够在众多框架中脱颖而出。最近为了实现next.js页面之间来回跳转加上loading效果提升用户体验写下这篇文章,希望能够帮助到大家。

操作

首先,我们来分析一下实现原理,首先路由之间跳转启动与结束要有监听事件,用到的就是next.js的router监听事件
Next.js页面之间跳转添加loading bar功能_第1张图片

有了监听事件我们就能够很好的控制页面之间的跳转。

接着我们需要一个loading bar置顶到页面最上面,这里我们会用到@tanem/react-nprogress这个插件

yarn add @tanem/react-nprogress

Next.js页面之间跳转添加loading bar功能_第2张图片

接着,我们打开这个地址,复制里面的代码到我们的项目中。

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的效果了。
Next.js页面之间跳转添加loading bar功能_第3张图片

Nice!

演示地址

总结

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

引用

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

你可能感兴趣的