在 next.js 13.4 中，可通过在 `app/` 根目录下创建 `loading.js`（或 `loading.tsx`）文件，自动为所有嵌套路由提供中心化加载 ui，无需手动监听导航事件。

Next.js App Router 内置了基于 React Suspense 的加载状态机制，loading.js 是其核心约定之一。只需在 app/loading.js（或 app/loading.tsx）中定义一个 React 组件，Next.js 就会在任何客户端导航（如点击 、调用 router.push() 或浏览器前进/后退）触发页面切换时，自动渲染该组件作为过渡 UI，并在目标页面内容就绪后平滑替换。

✅ 正确用法示例（app/loading.js）：

React 组件生成器

根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。

下载

export default function Loading() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50">
      <div className="flex flex-col items-center space-y-4">
        <div className="h-12 w-12 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
        <p className="text-gray-600 font-medium">Loading...</p>
      </div>
    </div>
  );
}

⚠️ 注意事项：

• loading.js 必须位于 app/ 目录根层级（即 app/loading.js），才能作用于整个应用；若放在子路径（如 app/dashboard/loading.js），则仅影响对应路由段。
• 它仅对客户端导航生效（服务端首次渲染不触发）；若需首屏加载态，应配合 loading.tsx（用于服务端流式响应）或 layout.tsx 中的骨架屏。
• 组件内不可使用 useRouter、useEffect 等客户端专属 Hook，因其可能在服务端执行；推荐纯静态 UI 或使用 use client 显式标记（但通常无需）。
• 加载效果默认有约 200ms 最小持续时间（防闪烁），可通过 loading.tsx + Suspense 配置进一步优化体验。

? 进阶提示：结合 error.js 和 not-found.js，可构建完整的应用级路由反馈体系——三者共同构成 App Router 的“边界协议”，是现代 Next.js 应用体验一致性的基石。