NextJs13给页面添加帅气的顶部加载进度条在船新的NextJs13中，点击页面跳转的时候，经常会发现页面没反应过来，

因为NextJs目前已经更新到NextJs13了，但是之前使用的是NextJs12，所以这里有两个版本的进度条版本

NextJs12

安装依赖

yarn add nprogress @types/nprogress

使用

//_app.ts
import {useRouter} from "next/router";
import NProgress from "nprogress"; //nprogress module
import "nprogress/nprogress.css"; //styles of nprogress

function MyApp() {
    const router = useRouter();
    useEffect(() => {
        // start route
        router.events.on("routeChangeStart", () => {
            console.log("routeChangeStart");
            NProgress.start();
        });
        // route complete
        router.events.on("routeChangeComplete", () => {
            console.log("routeChangeComplete");
            NProgress.done();
        });
        // route error
        router.events.on("routeChangeError", () => {
            console.log("routeChangeError");
            NProgress.done();
        });
    }, []);
    return (
      <>{children}</>
    )

export default MyApp

更改样式

// globals.css

#nprogress .bar {
    background: #0072f5 !important;
}

#nprogress .peg {
    background: #0072f5 !important;
}

#nprogress .spinner {
    /* 是否显示右边的加载圈圈 */
    display: none !important; 
}

NextJs13

因为NextJs13相比于NextJs12变动比较大，所以之前的那个在这边不适用了，主要是因为之前的router实例是从next/router包中取得，但是NextJs13是从next/navigate中取得，但是router的event事件又还是从next/router包中的Router中，而next/router和next/navigate的Router又不能同时存在，所以之前的包在NextJs13中是无法使用的，那么如何在NextJs13中添加加载进度条呢？下面就教大家使用，而且非常简单

安装依赖
```
yarn add next-nprogress-bar
```

使用依赖

//NprogressProvider

"use client";

import {ReactNode} from "react";
import {AppProgressBar as ProgressBar} from "next-nprogress-bar";
const NprogressProvider = ({children}: {children: ReactNode}) => {
  return (
    <>
      {children}
      <ProgressBar height="2px" color="#4F46E5" options={{showSpinner: false}} />
    </>
  );
};
export default NprogressProvider;

// app/layout.tsx
import {Metadata} from "next";
import {Toaster} from "react-hot-toast";
import {Inter} from "next/font/google";
import NprogressProvider from "@/components/NprogressProvider";
import "./globals.css";

// import WagmiProvider from "@/web3/WagmiProvider";

const inter = Inter({subsets: ["latin"]});

export const metadata: Metadata = {
  icons: "/icon.svg",
  title: "EMMAI",
  description:
    "EMMAI: Exchange, Movie-Marketplace, Asset-management, Intelligence. An open, transparent, and user-friendly trading platform",
};

export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html lang="en" className="min-h-full w-full">
      <body className={`${inter.className} min-h-screen w-full bg-globalBg overflow-y-auto`}>
        {/* <WagmiProvider> */}
        <NprogressProvider>{children}</NprogressProvider>
        {/* </WagmiProvider> */}
        <Toaster />
      </body>
    </html>
  );
}

至此，我们的NextJs13的项目就添加上了顶部加载进度条啦

但是有些小伙伴会发现，为什么有些页面的跳转会触发精度条，有些页面的跳转又不触发，其实这里需要注意的是，如果使用的Link标签进行跳转的，则可以直接触发进度条的显示，但是如果使用的router.push等router实例的方法进行跳转的，则不会触发进度条的显示，那我们需要如何来解决这个问题呢，其实next-nprogress-bar官方已经为我们提供了解决办法，就是我们需要将next/router实例出来的useRouter更换为next-nprogress-bar实例出来useRouter即可显示

//原
const {useRouter} from "next/router"
//现在
const {useRouter} from "next-nprogress-bar"

这样就能满足我们的日常需求啦，毕竟肯定有些地方是需要用router去跳转，有些地方是用Link标签跳转