NextJs 13 或 14 服务器在客户端上的操作进度

问题描述 投票:0回答:1

使用 NextJs 13 或 14 时,有没有办法在服务器操作期间通知客户端状态? 假设我有一个服务器操作,它对 1000 条数据库记录执行一项活动,我想在客户端上显示该活动的进度。

next.js server action
1个回答
0
投票

只需使用名为 nextjs-toploader 的包,您就可以实现类似于进度条的加载器。

安装它

npm i nextjs-toploader

将其添加到您的根布局中

import NextTopLoader from 'nextjs-toploader';

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

您还可以自定义加载器

<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}
/>
© www.soinside.com 2019 - 2024. All rights reserved.