Sanity+Next.js部署Netlify遇问题，求最新教程与解决方案

整体部署核心逻辑 #

Sanity + Next.js + Netlify 的部署核心是前后端分离部署：

• Next.js 前端：直接部署到 Netlify，通过环境变量关联 Sanity 项目的 API 密钥与数据集，支持 SSR/ISR/静态导出等模式
• Sanity Studio：两种部署路径——要么用官方命令部署到 Sanity 托管平台，要么打包后部署到 Netlify 作为独立站点或子路径

问题1：Next.js 部署后仅显示 HTML，样式/JS 失效 #

• 检查 Netlify 构建命令：静态导出用 next build && next export，SSR/ISR 模式直接用 next build
• 确认 next.config.js 配置：若部署在子路径，需设置 assetPrefix；否则留空即可
• 本地预测试：先执行 next build && next start 验证生产构建是否正常，排除代码本身问题
• 查看部署日志：检查 Netlify 构建阶段是否有依赖安装失败、环境变量未配置等报错

问题2：Sanity Studio 部署失败 + 依赖冲突 #

依赖冲突解决 #

sanity-plugin-dashboard-widget-netlify@^1.3.2 要求的 @sanity/ui@0.36.17 与当前项目依赖冲突，可通过以下方式解决：

• 执行 npm install sanity-plugin-dashboard-widget-netlify@^1.3.2 --legacy-peer-deps，强制忽略 peer dependency 冲突（本地运行正常说明不影响核心功能）
• 长期方案：升级 Sanity 项目到 React 18，逐步更新 @sanity/core、@sanity/ui 等核心依赖到兼容版本，从根源消除冲突

Sanity Studio 最新部署步骤 #

方式1：部署到 Sanity 官方托管平台

1. 确保项目根目录有 sanity.config.ts/js 或 sanity.json，已正确配置项目 ID 和数据集
2. 运行 sanity login 登录账号
3. 执行 sanity deploy，按提示输入部署域名（最终托管在 *.sanity.studio 域名下）

方式2：部署到 Netlify

1. 运行 sanity build 生成静态打包文件到 dist 目录
2. 在 Netlify 新建站点，选择 Studio 文件夹作为源码
3. 设置构建命令为 sanity build，发布目录为 dist
4. 添加环境变量 SANITY_PROJECT_ID 和 SANITY_DATASET

问题3：多文件夹（Studio + Web）项目部署方案 #

你的项目属于 monorepo 结构，有两种部署选择：

方案1：分开部署两个独立站点 #

• 在 Netlify 分别创建两个站点，一个关联 Web 文件夹（Next.js），一个关联 Studio 文件夹（Sanity Studio）
• 各自配置对应构建命令与环境变量，互不干扰

方案2：单站点子路径部署 #

通过 Netlify 配置将 Studio 部署到前端的子路径（如 /studio），示例配置：

1. 项目根目录创建 netlify.toml：

   [build]
     command = "cd web && npm install && npm run build && cd ../studio && npm install && sanity build && cp -r ../studio/dist ../web/out/studio"
     publish = "web/out"
   [[redirects]]
     from = "/studio/*"
     to = "/studio/:splat"
     status = 200
   [[redirects]]
     from = "/*"
     to = "/index.html"
     status = 200
   

2. 上述脚本会自动将 Studio 打包文件复制到 Next.js 静态导出目录的 studio 子文件夹，实现子路径访问

需要补充的信息 #

• Next.js 版本号，以及使用的是 SSR/ISR 还是静态导出模式
• Sanity 项目版本（执行 sanity --version 获取）
• Netlify 部署日志中的具体报错内容（尤其是 Next.js 构建阶段）
• next.config.js 和 sanity.config.ts/js 的关键配置片段

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