Next.js能否添加全局默认loading.js，使其作用于所有子页面？

可以实现全局默认的loading.js，让它作用于所有未自定义loading的子页面，具体方法如下：

1. 根层级全局默认loading #

在app目录的根层级（与layout.js同级）创建loading.js文件。这个loading组件会作为全局 fallback：所有子路由段如果没有自己定义loading.js，就会自动使用这个根级的loading。

2. 分组路由默认loading #

如果只需要给某一组路由设置统一默认loading，在该组的父布局目录下创建loading.js即可。比如app/dashboard目录下的loading.js，会作用于dashboard下所有未自定义loading的子页面（如/dashboard/settings、/dashboard/stats）。

关于你遇到的问题解释 #

你之前在page.js同级添加的loading.js，仅作用于当前路由段的page.js，而非该路由段下的子页面。这是因为App Router中loading.js的作用规则是：子路由段优先使用自己的loading.js，如果没有才会向上查找父级路由段的loading.js。

示例目录结构 #

app/
├── layout.js
├── loading.js       # 全局默认loading
├── page.js
├── blog/
│   ├── layout.js
│   ├── loading.js   # blog组的默认loading，覆盖全局
│   ├── page.js
│   └── post/
│       └── page.js  # 使用blog目录的loading.js
└── dashboard/
    ├── layout.js
    ├── page.js
    └── settings/
        └── page.js  # 使用根目录的loading.js

内容的提问来源于stack exchange，提问作者Steve Johnson