Vercel部署Sanity项目报错：缺少根布局，本地运行正常

问题原因 #

Next.js 13+的App Router模式要求所有路由页面必须存在对应的根布局文件（layout.jsx/layout.tsx）。你的Sanity Studio路由sanity/[[...index]]/page.jsx所在目录没有布局文件，本地开发模式因校验宽松未触发错误，但Vercel生产环境编译会严格检查，导致部署失败。

解决方案 #

1. 添加Sanity路由专属布局文件 #

在sanity目录下创建layout.jsx文件（路径需与page.jsx的父目录对应，示例路径：app/sanity/layout.jsx），内容如下：

export default function SanityLayout({ children }) {
  return children;
}

这个布局仅需直接返回子组件，无需额外样式，Sanity Studio自身会提供完整UI框架。

2. 校验Sanity配置的basePath #

打开你的sanity.config.js，确保basePath配置与路由路径完全一致：

export default defineConfig({
  // 其他已有配置...
  basePath: '/sanity', // 必须匹配你的Studio路由路径
})

3. 重新部署 #

提交修改后的代码到代码仓库，触发Vercel重新构建即可。

注意事项 #

• 禁止删除sanity/[[...index]]/page.jsx，该文件是Sanity Studio的入口，删除后会导致无法连接后端数据。
• 本地开发时可提前执行next build命令，模拟生产环境编译校验，避免部署时才发现问题。

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