NextJs使用NProgress加载效果

前言

在用户使用网站过程中，我们常常需要给用户一定的页面反馈，不然用户并不知道当前网页是卡住了还是正在等待处理，因此我们经常会在网页中添加加载loading效果，而这次就讲解一些nextJS中怎么来使用NProgress进度条

其实在Vue或者React中我们可以直接使用路由拦截，但是NextJs的路由并不需要我们自己管理，是NextJs自己会自动进行管理，所以我们该怎么来添加页面加载效果呢

1、安装NProgress

yarn install nprogress
yarn install -D @types/nprogress

2.使用

其实使用是非常简单的，这个教程也只是算给还不知道的大佬看看(包括我这个小菜菜)

2.1方法1

在_app.tsx页面中添加以下代码

import { useRouter } from 'next/router';
import NProgress from 'nprogress'; //nprogress module
import 'nprogress/nprogress.css';

const MyApp = ()=>{
  const router = useRouter();
  useEffect(() => {
    // TODO 后续可以加上全局页面loading效果
    //路由开始加载
    router.events.on('routeChangeStart', () => {
      console.log("routeChangeStart");
      NProgress.start()
    });
    //路由加载完成
    router.events.on('routeChangeComplete', () => {
      console.log("routeChangeComplete");
      NProgress.done()
    });
    // 路由加载错误
    router.events.on('routeChangeError', () => {
      console.log("routeChangeError");
      NProgress.done()
    });
  }, [])
  
   return (
       <div>Hello</div>
   )
}
export default MyApp;

2.2方法2

在_app.tsx页面中添加以下代码，其实与方法1没啥区别

import Router from 'next/router';
import NProgress from 'nprogress'; //nprogress module
import 'nprogress/nprogress.css'; //styles of nprogress

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

const MyApp = ()=>{
    return (
        <div>Hello</div>
    )
}
export default MyApp;

3.修改进度条样式

进度条有一个默认颜色，但是我们往往会让进度条的颜色与我们网站的主题色保持一致，那怎么来修改进度条的样式呢，其实很简单，CSS一键搞定，哈哈哈

以Nextjs12为例

只需要在src/style/globals.css中添加一下代码即可修改样式

#nprogress .bar {
  //你的主题色
  background: #0072F5 !important;
}

#nprogress .peg {
  //你的主题色
  background: #0072F5 !important;
}

4.扩展想法

因为我比较菜，所以一直不太知道NextJs怎么来添加全局Loading效果，但是这次使用NProgress我们其实发现，NextJS也是有路由拦截方法的，那我们是不是可以先写好一个全局加载的样式，然后先隐藏，再利用router的那几个事件，来控制全局加载样式的显示与隐藏。个人认为是可以的，期待下次的尝试，当然如果大家有更好的办法或者更好的教程，欢迎大家交流学习