Next.js Clerk vs. NextIntl. Middleware clash

Here are three sample projects on github:

1. Clerk + Next-INTL. Not working https://github.com/alexmeyercz/clerk-vs-next-intl-both
2. Clerk only. Works fine. https://github.com/alexmeyercz/clerk-vs-next-intl-clerk-only
3. Next-INTL only. Works fine. https://github.com/alexmeyercz/clerk-vs-next-intl-intl-only

There is just initial setup done according to documentation.

I have tried to setup middleware.ts according to documentation (Example: Integrating with 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*'],
}

What is not working?

God knows what else. So far I cannot pass through the following:

• Protection doesn't work (empty page, no errors: sign-in localhost link )
• Clerk tags not appearing, like UserButton doesn't generate anything.
• The same installation with Clerk only and Next-intl only works well
• No redirects on protected pages. / is redirected to /en/, but /protected stays on /protected (not /en/protected)

You need to chain the middlewares so that they execute one after another. try the below steps:

1. Create a file called middlewares/middlewarechain.ts in the root directory:

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. Now, add this below code snippet into your middleware.ts file:

export default middlewarechain([authMiddleware, intlMiddleware])

don't forget to import the middlewarechain function into middleware.ts and you can order the functions as your needs.