how to setup next-intl with multi tenant support

[alyatwa]

I am trying to setup next-intl with multi-tenancy like user123.domain.com/en , I tried so far but no result

withTenant.ts

export function withTenant(middleware: CustomMiddleware) {
   return async (req: NextRequest, event: NextFetchEvent, response: NextResponse) => {
      
      const url = req.nextUrl.clone();
      const host = req.headers.get("host");
      const subdomain = getValidSubdomain(host!);

      // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
      let hostname = req.headers
         .get("host")!
         .replace(".localhost:3000", `.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`);
    
      // special case for Vercel preview deployment URLs
      if (
         hostname.includes("---") &&
         hostname.endsWith(`.${process.env.NEXT_PUBLIC_VERCEL_DEPLOYMENT_SUFFIX}`)
      ) {
         hostname = `${hostname.split("---")[0]}.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`;
      }

      const searchParams = req.nextUrl.searchParams.toString();
      // Get the pathname of the request (e.g. /, /about, /blog/first-post)
      const path = `${url.pathname}${searchParams.length > 0 ? `?${searchParams}` : ""}`;

      // rewrites for app pages
      if (hostname == `app.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`) {
         const session = await getToken({ req });
         if (!session && path !== PATHNAMES.LOGIN) {
            return NextResponse.redirect(new URL(PATHNAMES.LOGIN, req.url));
         } else if (session && path == PATHNAMES.LOGIN) {
            return NextResponse.redirect(new URL("/", req.url));
         }
         return NextResponse.rewrite(new URL(`/app${path === "/" ? "" : path}`, req.url));
      }

      // rewrite everything else to `/[domain]/[slug] dynamic route
      url.pathname = `/${subdomain}${url.pathname}`;
      return NextResponse.rewrite(url); 
   };
}

chain.ts

export type CustomMiddleware = (
   request: NextRequest,
   event: NextFetchEvent,
   response: NextResponse,
) => NextMiddlewareResult | Promise<NextMiddlewareResult>;

type MiddlewareFactory = (middleware: CustomMiddleware) => CustomMiddleware;

export function chain(functions: MiddlewareFactory[], index = 0): CustomMiddleware {
   const current = functions[index];

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

   return (request: NextRequest, event: NextFetchEvent, response: NextResponse) => {
      return response;
   };
}

middleware.ts

import { chain } from "./middlewares/chain";

export default chain([withInitResponse, withAuth, withNextIntl, withTenant]);

export const config = {
   // Skip all paths that should not be internationalized
   matcher: ["/((?!api|_next|.*\\..*).*)"],
};

withNextIntl.ts

export function withNextIntl(middleware: CustomMiddleware) {
   return async (request: NextRequest, event: NextFetchEvent) => {

      const handleI18nRouting = createMiddleware<any>({
         locales: LOCALES,
         defaultLocale: getPreferredLocale(request),
         localePrefix: "always",
         localeDetection: true,
      });

      const response = handleI18nRouting(request);
      // Call the next middleware and pass the request and response
      return middleware(request, event, response);
   };
}

export function getPreferredLocale(request: NextRequest) {
   //  cookie
   const localeCookie = request.cookies.get("NEXT_LOCALE")?.value;
   if (localeCookie && LOCALES.includes(localeCookie)) {
      return localeCookie;
   }

   //Accept-Language
   const acceptLanguage = request.headers.get("Accept-Language");
   if (acceptLanguage) {
      const preferredLocale = acceptLanguage.split(",")[0].split("-")[0];
      if (LOCALES.includes(preferredLocale)) {
         return preferredLocale;
      }
   }

   return "en";
}

folder structure