NextJs 快速引入Nprogress

一：安装

npm i nprogress -S

二：引用

// _app.tsx
import { useEffect } from "react";
import { useRouter } from "next/router";
import NProgress from "nprogress";
import "../style/nprogress.css"; // cdn下载到本地

export default function MyApp({ Component, pageProps }: AppProps) {
  ....
  const router = useRouter();

  useEffect(() => {
    router.events.on("routeChangeStart", () => {
      NProgress.start();
    });
    router.events.on("routeChangeComplete", () => {
      NProgress.done();
    });
    router.events.on("routeChangeError", () => {
      NProgress.done();
    });
  }, []);
  ....
}