i18n with app router and locale from the backend

[marto1980]

Hello, I am trying to use next-intl with i18n routing in a setup, where the locale is obtained via a http end point from the backend.
Here is some code from my latest almost working example:

middleware.ts:

import createMiddleware from 'next-intl/middleware';

 export default createMiddleware({
  // A list of all locales that are supported
  locales: ['en', 'de'],
   // Used when no locale matches
  defaultLocale: 'en',
});

 export const config = {
  // Match only internationalized pathnames
  matcher: ['/', '/(de|en)/:path*']
};

i18n.ts:

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';
import { Locale } from './i18n.types';

// Can be imported from a shared config
const locales = ['en', 'de'];

const getLocale = async (): Promise<Locale> => {
    const response = await fetch('http://localhost:3001/locale', {cache: 'no-store'});
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    const data: Locale = await response.json();
    return data;
};

export default getRequestConfig(async () => {

    const { locale } = await getLocale()
console.log('locale in getRequestConfig:', locale)
    // Validate that the incoming `locale` parameter is valid
    if (!locales.includes(locale as any)) notFound();

    return {
        messages: (await import(`../messages/${locale}.json`)).default
    };
});

The console log in getRequestConfig reports the correct locale 'de', the page is correctly translated, but the url in the path is prefixed with the wrong locale 'en'. How can I solve that?

[amannn]

I think the better idea might be to call http://localhost:3001/locale and resolve the locale in the middleware, and use the result to configure the defaultLocale (see also composing the middleware). In this case, you'll want to turn off localeDetection.