Next.js中如何实现初始页面灰块加载动画？是否有相关库？

你描述的灰色加载占位块效果是骨架屏（Skeleton Screen），是目前主流的内容加载占位方案，在Next.js里实现非常简单，以下是具体方案：

无依赖原生实现 #

Next.js本身已经内置了加载态的支持，不需要额外引入库就能实现：

• 如果你用App Router：直接在对应路由目录下创建loading.tsx文件，Next.js会在页面初始加载、路由跳转时自动渲染该文件的内容，等页面组件、依赖的数据请求全部完成后，自动替换为真实页面内容。
• 如果你用Pages Router：可以在_app.tsx里监听路由的routeChangeStart、routeChangeComplete事件控制加载状态，或者在每个页面组件内根据数据请求的loading状态渲染占位内容。

骨架的扫光动效可以直接用CSS实现，参考代码：

.skeleton-block {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.4s infinite linear;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

你只需要按照真实页面的布局结构，写对应宽高的div加上skeleton-block类名，就能做出和示例完全一致的效果。如果是局部组件的异步加载，直接在组件内部判断loading状态，返回对应骨架块即可。

开源库方案 #

如果不想手动写骨架样式、适配不同布局，可以直接用成熟的开源库提升开发效率：

• react-loading-skeleton：轻量无依赖，是React生态最常用的骨架屏库，自带默认的扫光动效，支持自定义宽高、圆角、颜色、行数，在Next.js下不需要额外配置，引入组件直接使用即可。
• react-content-loader：基于SVG实现的骨架屏库，灵活度极高，可以自定义任意形状的占位块，适合做带头像、特殊轮廓的复杂卡片类骨架，社区也有大量现成的布局模板可以直接复用。
• MUI、Antd这类主流组件库也都内置了Skeleton组件，如果你的项目已经在用这些组件库，直接用内置组件即可，不需要额外安装依赖。

内容的提问来源于stack exchange，提问作者Vraj Solanki