Not redirected as expected on middleware with dynamic locales array

[Antoine-Regembal]

Hi there,

I am facing a weird issue were I'm not redirected as expected once my application is deployed on production, it's working fine on my local machine (worst case scenario 😏).

I need to dynamically load the array of locales available for the user depending on the user country and rights. To do that and following the documentation I use the createMiddleware function inside the nextJS middleware, and there I dynamically define the array of locale the current user can access to:

import createMiddleware from 'next-intl/middleware';
import { NextRequest, NextResponse } from 'next/server';

export default function middleware(request: NextRequest) {
  // NextJS middleware cannot access to NodeJS API, so i'm not able to access the user Redis session to check which locales he can access to depending of his rights.
  // To get around this limitation I set a cookie during authentication, that contains the user's authorized locales and that I can access to inside the middleware.
  const localeCookie = request.cookies.get('__locales');

  // If not set, I force the user to authenticate again to generate the cookie.
  if (!localeCookie || !localeCookie.value) {
    return NextResponse.redirect(`${request.nextUrl.origin}/api/login`);
  }

  // This array can look like ["en-GB", "fr-FR", ...]
  const userLocales = JSON.parse(localeCookie.value);

  const handleI18nRouting = createMiddleware({
    locales: [...userLocales],
    defaultLocale: userLocales[0], // Currently I simply set the first element as the default.
  });

  const response = handleI18nRouting(request);

  return response;
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

With this code and when the user can only access to ONE locale (meaning when the userLocales array has ONE value, "fr-FR" for example), it works well. If the locale is missing from the URI, next-intl will add it for me as expected.

But when the user can access to multiple locales, if he's an admin or his country is using multiple locales such as Switzerland for example (fr-CH, de-CH, it-CH, ...), then next-intl does not automatically add the locale to the URI when missing.

-> it's working fine on my local machine, but not once deployed using a Dockerfile on a K8S pod. If I try to access to an URI where I manually put the locale it works. If I omit the locale from the URI, I'm facing a 502 bad gateway error from the nginx server, and I can see that the locale was not automatically added to the URI.

Something I've noticed is that once deployed, the application running on the K8S pod is still started as http://localhost:3000, but the kubernetes ingress allows me to access the app from my company intranet using a custom URL such as https://my-app/

Because it's working on my locale machine and not once deployed on a K8S pod, could it have something to do with the createMiddleware function returning a response that tries to access to localhost:3000 even once deployed ? Should I manually change the localhost:3000 occurrences from the response object with the ingress URL ?

I cannot give you an example repository because I just simply cannot reproduce our deployment environment here..

Thanks for any advices ✌🏻

Antoine

[Antoine-Regembal]

Might be related to #1556 ?

[Antoine-Regembal]

I managed to manually handle redirects between localhost:3000 (once deployed) and the actual ingress URI with this code inside the middleware:

export default function middleware(request: NextRequest) {
  // ..... //

  const handleI18nRouting = createMiddleware({
    locales: [...userLocales],
    defaultLocale: userLocales[0],
  });

  const response = handleI18nRouting(request);

  const { pathname } = request.nextUrl;

  const startsWithALocaleRegexp = new RegExp('/[a-z]{2}-[A-Z]{2}(?:/.*)?');   // This regex matches if the string starts with a locale, like "/fr-FR" or "/fr-FR/anything

  if (startsWithALocaleRegexp.exec(pathname) === null) { // if the current pathname doesn't starts with a locale, we redirect
    const nextIntlWorkingLocale = request.cookies.get('NEXT_LOCALE');
    const destinationLocale =
      nextIntlWorkingLocale && nextIntlWorkingLocale.value ? nextIntlWorkingLocale.value : userLocales[0]; // check if next-intl already has a "working" locale, otherwise taking the first item from the locales array as a fallback

    return NextResponse.redirect(
      new URL(`${destinationLocale}${request.nextUrl.pathname}`, process.env.MY_DEPLOYED_APP_BASE_URL), // MY_DEPLOYED_APP_BASE_URL = https://my-app for example : this ensure the redirection doesn't target localhost:3000 once deployed but the ingress URL that I define on the application environment variables
    );
  }

  return response;
}

I don't know if I am supposed to do it this way and/or if there are better solutions ?