Next.js 13(App目录v13.4.12)中root layout用notFound()报错求助

错误原因 #

Next.js 13 App目录的根布局（app/layout.js）是应用的全局顶层容器，所有路由页面都会嵌套在该布局下。出于框架设计逻辑，根布局中不允许调用notFound()——因为这会导致整个应用直接返回404，违背了布局作为页面容器的定位。

解决方法 #

把项目存在性的判断逻辑迁移到具体的页面组件或子布局中，而非根布局：

• 如果是某个动态路由页面（比如app/[projectId]/page.js）需要判断项目是否存在，直接在该页面组件内调用notFound()：

// app/[projectId]/page.js
import { notFound } from 'next/navigation';

async function getProject(projectId) {
  // 这里写获取项目数据的逻辑
  const res = await fetch(`/api/projects/${projectId}`);
  if (!res.ok) return null;
  return res.json();
}

export default async function ProjectPage({ params }) {
  const project = await getProject(params.projectId);
  
  if (!project) {
    notFound(); // 这里调用是允许的
  }

  return (
    <div>
      {/* 项目内容渲染 */}
    </div>
  );
}

• 如果需要在非根布局中处理（比如某个路由组的布局），确保该布局不是应用的顶层根布局，同样可以在其中调用notFound()。

关键注意点 #

• 根布局只能负责全局通用的UI渲染（比如导航栏、页脚），不能包含会导致整个应用跳转404的逻辑。
• notFound()仅允许在页面组件、子布局、服务器组件或客户端组件（客户端组件需在useEffect中调用）中使用。

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