Next.js 顶部加载条

一个使用 nprogress 制作的 Next.js 顶部加载条组件，适用于 Next.js 14 和 React。

安装

使用 npm：

npm install nextjs-toploader

使用 yarn：

yarn add nextjs-toploader

使用方法

导入方式：

import NextTopLoader from 'nextjs-toploader';

在 `app` 文件夹结构中的 `app/layout.js` 中使用

在 RootLayout() 的 return() 中的 <body></body> 内添加 <NextTopLoader /> 进行渲染：

import NextTopLoader from 'nextjs-toploader';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextTopLoader />
        {children}
      </body>
    </html>
  );
}

在 `pages` 文件夹结构中的 `pages/_app.js` 中使用

在 MyApp() 的 return() 中添加 <NextTopLoader /> 进行渲染：

import NextTopLoader from 'nextjs-toploader';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextTopLoader />
      <Component {...pageProps} />;
    </>
  );
}

在 React、Vite React 或其他基于 React 的框架中使用

在 App.js 的 App() 中的 <Router></Router> 组件内的 return() 中添加 <NextTopLoader /> 进行渲染：

import NextTopLoader from 'nextjs-toploader';
const App = () => {
  return (
    <div>
    <Router>
      <NextTopLoader />
    <Routes>
    {/* 在此处添加你的路由 */}
    </Routes>
    </Router>
    </div>
  )
}

export default App;

默认配置

如果没有向 <NextTopLoader /> 传递任何属性，将应用以下默认配置。

<NextTopLoader
  color="#2299DD"
  initialPosition={0.08}
  crawlSpeed={200}
  height={3}
  crawl={true}
  showSpinner={true}
  easing="ease"
  speed={200}
  shadow="0 0 10px #2299DD,0 0 5px #2299DD"
  template='<div class="bar" role="bar"><div class="peg"></div></div> 
  <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
  zIndex={1600}
  showAtBottom={false}
/>