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