Hey everyone! 👋 I'm working on a Next.js project and I'm stuck trying to combine two different middleware approaches. I'd really appreciate some help or insights on this.

Current Setup:

I have an internationalization middleware set up like this:

 import createIntlMiddleware from "next-intl/middleware";
import { LocalePrefix } from "next-intl/routing";
import { type NextRequest } from "next/server";
import { locales } from "./navigation";

export const defaultLocale = "en";

const intlMiddleware = createIntlMiddleware({
  locales,
  defaultLocale,
  localePrefix: "as-needed" satisfies LocalePrefix,
  localeDetection: true,
});

export default function middleware(request: NextRequest) {
  const response = intlMiddleware(request);
  response.headers.set("x-current-path", request.nextUrl.pathname);
  return response;
}

export const config = {
  matcher: [
    "/((?!api|_next|favicon.ico|apple-touch-icon.png|assets|fonts|images|icons|manifest).*)",
  ],
};

The Challenge:
I've been advised to add authentication middleware, which is typically set up like this:

export { auth as middleware } from "@/auth";

What I Need:
I want to combine both the internationalization and authentication middleware. I don't want to lose the i18n functionality, but I also need to implement the auth middleware.
Questions:

How can I effectively combine these two middleware approaches?
Is there a way to chain or compose these middlewares?
Should one middleware run before the other? If so, which one and why?
Are there any pitfalls or common issues I should be aware of when combining middlewares like this?

Any code examples, explanations, or resources would be super helpful. Thanks in advance for your help! 🙏