Next.js 15.1.4中loading.js不生效，请教正确使用方式及资源

按照预期，loading.js在任意文件夹中都应生效，但实际场景中该文件完全不显示。Next.js文档明确说明这是用于实现加载UI的特殊文件，以下是正确使用方法及排查要点：

核心前提确认 #

• 仅支持Next.js 13+版本的App Router：loading.js是React Server Components配套的特性，Pages Router目录结构下无法生效，必须确保项目使用app/作为根路由目录。
• 文件名严格匹配：必须是小写的loading.js（或.tsx），拼写错误、大小写错误（如Loading.js）都会导致失效。

正确使用步骤 #

1. 放置位置：将loading.js放在app/目录下的任意路由文件夹中，比如app/posts/loading.js会对应/posts路由的加载状态。
2. 组件编写要求：导出一个普通React组件，不能是异步组件，示例：

export default function Loading() {
  return (
    <div className="flex justify-center items-center h-screen">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  );
}

3. 触发加载状态：加载UI仅在路由组件（或其嵌套组件）存在异步数据请求时触发，比如使用fetch或async/await的Server Component。测试示例：

// app/posts/page.js
export default async function PostsPage() {
  // 模拟异步请求延迟
  await new Promise(resolve => setTimeout(resolve, 2000));
  const posts = await fetch('https://api.example.com/posts').then(res => res.json());
  
  return <div>帖子列表：{posts.length}条</div>;
}

常见问题排查 #

• 重启开发服务器：开发模式下缓存可能导致组件不更新，执行npm run dev重启服务。
• 强制动态渲染：如果路由被静态生成（SSG），加载UI可能不会触发，可在路由组件中添加：

export const dynamic = "force-dynamic";

• 检查嵌套路由：如果是嵌套路由，loading.js会作用于当前路由及其子路由，确保路由结构正确。

内容的提问来源于stack exchange，提问作者Sumaiya Noorjahan