如何用一行代码在 Next.js 中添加路由器进度条

Next.js 中的页面是延迟加载的，因此如果您获取某些 API 或从数据库获取数据，可能需要几秒钟才能到达第二个页面。因此，为了让用户知道页面正在加载，我们将在屏幕顶部添加一个进度条。它的外观如下：

https://www.loom.com/share/de44131850c743dcbbefc0e4f0e48b48

让我们开始吧

创建 Next 应用

npx create-next-app next-progress-bar

安装所需的依赖项

npm i nextjs-progressbar # npm
yarn add nextjs-progressbar # yarn

创建页面（用于演示）

首先，在 pages 文件夹中创建一个新文件。这将为你创建一个新的路由。
我将其命名为about.js。我只是创建了一个h1标签和一个button用于重定向到主页的 URL。

import Head from "next/head";
import { useRouter } from "next/router";

export default function About() {
  const router = useRouter();

  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <h1>About page</h1>
      <button onClick={() => router.push("/")}>Go to Home</button>
    </div>
  );
}

我将在index.js中执行相同操作，但重定向到关于页面

import Head from "next/head";
import { useRouter } from "next/router";

export default function Home() {
  const router = useRouter();

  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <h1>Home page</h1>
      <button onClick={() => router.push("/about")}>Go to about me</button>
    </div>
  );
}

添加进度条📊

我们将转到_app.js并添加NextNProgress组件

import "../styles/globals.css";
import NextNProgress from "nextjs-progressbar";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextNProgress />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

就这样！进度条现在正常工作了🥳🎉。

自定义进度条

您可以添加一些属性，NextNProgress例如颜色、高度、键、ref、startPosition 等等。我主要只更改颜色和高度，因为我喜欢其他样式的默认设置。以下是更改颜色和高度的方法：

<NextNProgress height={6} color="#4338C9" />

这会使进度条变得更粗，颜色为紫色。您可以随意尝试不同的颜色和样式。请在评论区留言，分享您最喜欢的进度条样式 👇🏻

有用的链接 -

文章来源：https://dev.to/avneesh0612/how-to-add-router-progress-bar-in-next-js-with-one-line-of-code-8o4