Next.js集成Clerk与Sanity时访问/studio触发Clerk中间件错误

针对你访问/studio路由时出现的Clerk auth()错误，以下是几个可行的排查和解决步骤：

1. 显式将/studio路由加入Middleware匹配规则 #

虽然当前matcher理论上覆盖/studio，但显式添加可确保路由被Clerk Middleware处理。修改src/middleware.ts的config.matcher：

export const config = {
  matcher: [
    // 显式匹配Sanity Studio路由
    "/studio(.*)",
    // 保留原有规则
    "/((?!_next|[^?]*\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
    "/(api|trpc)(.*)",
  ],
};

2. 确认Sanity Studio页面的组件类型 #

如果Sanity Studio页面是服务器组件，调用auth()时需要确保Middleware已完成认证传递。可尝试将Studio页面改为客户端组件：

// app/studio/[[...index]].tsx
'use client';

import { NextStudio } from 'next-sanity/studio';
import config from '@/sanity.config';

export default function StudioPage() {
  return <NextStudio config={config} />;
}

3. 更新Clerk依赖到兼容Next.js 15的版本 #

Next.js 15属于较新版本，旧版Clerk可能存在兼容性问题，执行更新命令：

pnpm update @clerk/nextjs

4. 强制重启开发服务器 #

Next.js的Middleware有时不会热重载生效，完全关闭开发服务器后重新启动：

pnpm dev --clear-cache

5. 排查重复的Middleware文件 #

确保项目根目录（非src文件夹下）没有另一个middleware.ts或middleware.js文件，避免规则冲突。

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