Next.js Clerk与NextIntl中间件冲突问题求助

项目背景 #

我搭建了三个测试项目：

• Clerk + next-intl 集成项目：无法正常工作
• 仅使用 Clerk 的项目：运行正常
• 仅使用 next-intl 的项目：运行正常

所有项目均严格按照官方文档完成初始配置，并且已参照 next-intl 官方提供的「与 Clerk 集成」示例配置了 middleware.ts。

配置代码 #

import { authMiddleware } from '@clerk/nextjs'
import createMiddleware from 'next-intl/middleware'

const intlMiddleware = createMiddleware({
  locales: ['en', 'de'],
  defaultLocale: 'en',
})

export default authMiddleware({
  beforeAuth(request) {
    return intlMiddleware(request)
  },

  // 确保带区域设置的登录页可公开访问
  publicRoutes: ['/:locale', '/:locale/sign-in'],
})

export const config = {
  // 仅匹配带国际化前缀的路径
  matcher: ['/', '/(de|en)/:path*'],
}

出现的问题 #

• 权限保护失效：访问受保护页面后跳转到空白登录页，无任何报错（跳转地址示例：http://localhost:3000/en/sign-in?redirect_url=http%3A%2F%2Flocalhost%3A3000%2Fde%2Fprotected）
• Clerk 组件无法渲染：例如 UserButton 组件没有任何输出
• 单独使用 Clerk 或 next-intl 时所有功能均正常
• 受保护页面未自动添加区域前缀：根路径 / 会自动重定向到 /en/，但访问 /protected 时停留在原路径，未重定向到 /en/protected

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