如何在Next.js 13中配置Sanity Studio v3作为子路由？

先梳理你已完成的配置 #

你的项目结构：

├── My Application
│   ├── pages
│   ├── app
│   ├── src
│   └── studio
│       ├── schema
│       └── ...

已经设置的关键配置：

1. 在sanity.config.js中指定路由前缀：

export default defineConfig({
  name: 'default',
  title: 'ExpandedTemplate',
  basePath: '/studio',
  // 其他配置项
})

2. 在vercel.json中添加重写规则：

{
  "rewrites": [
    { "source": "/studio/(.*)", "destination": "/studio/index.html" }
  ]
}

补充关键配置步骤 #

• 指定Studio构建输出路径：修改studio/package.json的构建命令，将Studio的静态构建产物直接输出到Next.js的public/studio目录，让Next.js能直接识别并提供静态资源服务：

  "scripts": {
    "build": "sanity build --output-path ../public/studio"
  }
  

• 避免路由冲突：检查app或pages目录下是否存在名为studio的文件/文件夹，若有必须删除或重命名，否则会和Sanity Studio的子路由产生冲突。
• 本地验证流程：先执行npm run build（先构建Studio，再构建Next.js），启动Next.js开发服务器后，访问http://localhost:3000/studio，确认Studio界面能否正常加载。
• Vercel部署校验：部署完成后，进入Vercel控制台的「Settings」→「Rewrites and Redirects」，确认重写规则是否生效；若出现404错误，手动核对规则配置是否正确。

核心配置逻辑 #

利用Next.js的静态资源服务机制，将Sanity Studio构建为静态单页应用后放置到public目录，通过basePath指定路由前缀，再配合Vercel的重写规则处理单页应用的路由跳转，确保/studio下的所有路径都指向Studio的入口文件。

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