Next.js+Clerk报错：Property 'protect'不存在于ClerkMiddlewareAuth类型

问题背景 #

按照Clerk官方教程编写代码，在Clerk 5.3.2和5.7版本中出现类型错误：Property 'protect' does not exist on type 'ClerkMiddlewareAuth'.ts(2339)，希望保留auth.protect()的用法解决问题。

解决方案 #

方案1：适配Clerk v5+（推荐） #

Clerk v5对Middleware API做了更新，原回调参数中的auth不再是直接的认证对象，而是一个需要调用的函数。修改代码如下：

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)', '/forum(.*)'])

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) await auth().protect()
})

export const config = {
  matcher: [
    '/((?!_next|[^?]*\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
}

核心变化：将auth.protect()改为auth().protect()，先调用auth()获取认证实例，再调用protect()方法。

方案2：降级到Clerk v4保留原写法 #

如果坚持使用auth.protect()的原始写法，可以降级到Clerk v4版本（v4中auth是直接的认证对象，支持该调用方式）：

执行以下命令安装v4最新稳定版：

npm install @clerk/nextjs@4.29.11

降级后无需修改原有代码，即可正常运行。

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