How to combine multiple libraries middleware in Nextjs 14?

Question

I have a problem with 2 libraries that I want to implement in the NextJS app: Supabase (pkt 4) & the next-intl. Both of them share middleware methods that return right-away the NextResponse. I was trying to utilize both of them but failed all the time returning both at one NextResponse.

I was trying custom middleware with stackMiddlewares like in this question, but both of them are not returning NextResponse, only NextMiddleware.

I have two middlewares

export const withI18n: MiddlewareFactory = (next) => {
  return async (request: NextRequest, _next: NextFetchEvent) => {
    
    // WHAT TO DO WITH THAT?
    const response = createMiddleware({
      defaultLocale: 'en',
      locales: SUPPORTED_LOCALES,
      pathnames,
      localePrefix,
    });

    return next(request, _next);
  };
};

the client docs that outputs the updateSession method.

export const withSupabaseSessionUpdate: MiddlewareFactory = (next) => {
  return async (request: NextRequest, _next: NextFetchEvent) => {

    // WHAT TO DO WITH THAT
    const response = await updateSession(request);

    return next(request, _next);
  };
};

Answer 1

Got my question resolved with next-intl discussion panel. I just followed the @supabase/auth-helpers-nextjs docs, and that's it!