使用Next.js 13前端设置Sanity Studio给了我一个SyntaxError

Question

我正在尝试用我的Next.js 13前端设置Sanity Studio。我将http://localhost:3000添加到我的Sanity项目CORS原点，然后，我创建了这个sanity.config.ts文件:

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

和这个app/admin/[[...index]]/page.tsx文件:

"use client";
import config from "@/sanity.config";
import { NextStudio } from "next-sanity/studio";
export default function AdminPage() {
return <NextStudio config={config} />;
}

应该是它，但是当我尝试访问http://localhost:3000/admin时，它不加载并且我的控制台打印此错误:

error - SyntaxError: "undefined" is not valid JSON
at JSON.parse (<anonymous>)

我该如何解决这个问题?

我希望通过以下链接显示我的项目的Sanity Studio仪表板:http://localhost:3000/admin.

Answer 1

解决方案是将AdminPage从app/admin/[[...index]]/page.tsx转换为箭头函数，然后将其导出到单独的代码行，如下所示:

"use client";
import config from "@/sanity.config";
import { NextStudio } from "next-sanity/studio";
const AdminPage = () => {
return <NextStudio config={config} />;
}
export default AdminPage;

这似乎是Next.js 13的一个bug， @Yaser和@Nimish在这个YouTube视频中指出了这一点。