Next.js/ next-intl Default Locale Configuration Redirects to /en Despite 'en' as Default Locale

Question

I am encountering an issue in my Next.js application where, despite configuring the default locale to be 'en' in middleware.js, the application is still redirecting to '/en' when I visit the root URL (localhost:3000).

import createMiddleware from 'next-intl/middleware';

export default createMiddleware( {
  // A list of all locales that are supported
  locales: [ 'en', 'ar', 'es' ],

  // If this locale is matched, pathnames work without a prefix (e.g. `/about`)
  defaultLocale: 'en',
  localeDetection: false,
} );

export const config = {
  // Skip all paths that should not be internationalized. This example skips the
  // folders "api", "_next" and all files with an extension (e.g. favicon.ico)
  matcher: [ '/((?!api|_next|.*\\..*).*)' ]
};

Expected Behavior: I expect the application to display the English version at the root URL ('/') since 'en' is set as the default locale.

Actual Behavior: The application redirects to '/en' instead of displaying the English version at localhost:3000.

Answer 1

You can use the localePrefix prop for this case:

export default createMiddleware({
  locales: ['en', 'ar', 'es'],
  defaultLocale: "en",
  localPrefix: "as-needed",
});

It can be either 'as-needed' | 'always' | 'never'

• never: Never keep the prefix.
• always: Always put the prefix.
• as-needed: Keep the prefix only if it's not the default local.