Next.js Clerk 与 NextIntl。中间件冲突

Question

以下是 github 上的三个示例项目：

1. 文员+下一个国际。 不工作 https://github.com/alexmeyercz/clerk-vs-next-intl-both
2. 仅限文员。 工作正常。 https://github.com/alexmeyercz/clerk-vs-next-intl-clerk-only
3. 仅限下一国际航班。 工作正常。 https://github.com/alexmeyercz/clerk-vs-next-intl-intl-only

---

仅根据文档完成初始设置。

我尝试根据文档设置 middleware.ts （示例：与 Clerk 集成 ）： https://next-intl-docs.vercel.app/docs/routing/middleware#example-integrating-with-clerk

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)
  },

  // Ensure that locale-specific sign in pages are public
  publicRoutes: ['/:locale', '/:locale/sign-in'],
})

export const config = {
  // Match only internationalized pathnames
  matcher: ['/', '/(de|en)/:path*'],
}

什么不起作用？

天知道还有什么。到目前为止我无法通过以下内容：

• 保护不起作用（空页面，没有错误：登录本地主机链接）
• Clerk 标签没有出现，就像 UserButton 没有生成任何东西。
• 仅与 Clerk 和 Next-intl 进行相同的安装效果很好
• 受保护的页面上没有重定向。 / 重定向到 /en/，但 /protected 保留在 /protected（不是 /en/protected）

Answer 1

您需要链接中间件，以便它们依次执行。尝试以下步骤：

1. 在根目录中创建一个名为 middlewares/middlewarechain.ts 的文件：

import { NextResponse } from 'next/server'
import type { NextMiddleware } from 'next/server'

type TMiddleware = (middleware: NextMiddleware) => NextMiddleware

export function middlewarechain(
  functions: TMiddleware[],
  index = 0
): NextMiddleware {
  const current = functions[index]

  if (current) {
    const next = chain(functions, index + 1)
    return current(next)
  }

  return () => NextResponse.next()
}

2. 现在，将以下代码片段添加到您的 middleware.ts 文件中：

导出默认中间件链([authMiddleware, intlMiddleware])

不要忘记将 middlewarechain 函数导入 middleware.ts 中，您可以根据需要订购函数。另外，如果有帮助的话请给我点个赞吧😃

Answer 2

我也遇到同样的问题，职员登录表单未显示在带有登录网址的重定向窗口中。我按照上面 Fakhrul Islam Fuad 的描述创建了 middlewares\middlewarechain.ts。我到底应该如何修改我的 middleware.ts 来实现这个解决方案？