在Next.js 13中配置Sanity Studio时遭遇SyntaxError错误求助

可能的原因及解决步骤 #

1. 环境变量未正确加载或配置缺失 #

这个错误通常是因为Sanity配置中的必要字段（如projectId或dataset）被解析为undefined，导致JSON解析失败。即使代码中写死了值，也可能存在环境变量覆盖或加载问题：

• 在项目根目录创建.env.local文件，添加Sanity项目的环境变量：

  NEXT_PUBLIC_SANITY_PROJECT_ID=p7dk6747
  NEXT_PUBLIC_SANITY_DATASET=production
  

• 修改sanity.config.ts，确保配置字段正确读取环境变量（同时保留硬编码值作为 fallback）：

  import { defineConfig } from "sanity";
  import { deskTool } from "sanity/desk";
  
  const config = defineConfig({
      projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || 'p7dk6747',
      dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
      title: 'Por La Línea Studio',
      apiVersion: "2023-03-04",
      basePath: "/admin",
      plugins: [deskTool()]
  })
  
  export default config;
  

2. 验证Next.js与Sanity包的版本兼容性 #

Next.js 13的App Router需要next-sanity版本v4.0.0及以上支持，版本过低会导致渲染异常：

• 执行命令更新依赖：

  npm install next-sanity@latest sanity@latest
  

3. 清除缓存并重启开发服务器 #

缓存可能导致配置未正确更新，执行以下操作：

• 删除.next文件夹
• 重启开发服务器：npm run dev

4. 检查CORS配置的完整性 #

确保Sanity项目的CORS设置不仅添加了http://localhost:3000，还开启了Allow credentials选项：

• 登录Sanity管理后台，进入项目设置 → API → CORS origins
• 编辑已添加的http://localhost:3000，勾选"Allow credentials"
• 保存设置

5. 确认路由与basePath配置一致 #

你的sanity.config.ts中basePath设为/admin，页面路径app/admin/[[...index]]/page.tsx是正确的，但需确保：

• 没有其他路由规则冲突
• 页面组件的"use client";指令正确添加（你的代码中已包含，此步骤为确认）

完成以上步骤后，重新访问http://localhost:3000/admin，应该能正常加载Sanity Studio仪表盘。

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