How to get next config's redirects working with prefixed locale in url.

[pbortnick]

The redirects set in my next.config.js are not working if I visit the source url with the locale in the url.

Example:

next.config.js

import createNextIntlPlugin from 'next-intl/plugin';
 
const withNextIntl = createNextIntlPlugin();
 
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/about-us',
        permanent: true,
      },
    ]
  },
}
 
export default withNextIntl(nextConfig);

Expected behavior: Visit mysite.com/es/about and am redirected to mysite.com/es/about-us.

Actual behavior: Visit mysite.com/es/about. No redirect occurs and I receive 404 error.

Note: If I visit /about with my cookie set to es, it does redirect to /es/about-us as expected

[amannn]

Yep, the redirects in next.config.js aren't touched in any way by next-intl. You can adapt them though if you'd like them to consider a locale prefix.

Alternatively, you could also implement the redirects via redirect in components to automatically pick up a potential locale prefix.

[pbortnick]

Thanks @amannn. We are applying next-intl on a large application and this is one of the final steps. As we already have many redirects defined in next.config.js do you have any suggestions on best practices for adapting them? Or is it something like just adding an optional :locale prefix to each?

[amannn]

The tricky part with :locale could be that it might match also non-locales (e.g. /unknown/about → /unknown/about-us).

Maybe iterating over your available locales in next.config.js and providing explicit redirects for each locale without a dynamic segment like :locale could be safer?

[pbortnick]

Yeah that is a good point! That's probably what we will do. Thank you 😄

[pbortnick]

I realize I didn't mention this earlier but I am using localePrefix: as-needed meaning that I actually need to duplicate every redirect so that both, a non-localized version and a localized version, exist.

[
  {
      source: '/about',
      destination: '/about-us',
      permanent: true,
  },
  {
      source: ':locale(en|es|ja)/about',
      destination: ':locale/about-us',
      permanent: true,
  },
]

This would work great if your app only has a handlful of redirects. Unfortunately Vercel has a maximum redirect limit so if you have a lot of redirects set (like I do) this will not work. You will have to find some other solution such as managing-redirects-at-scale-advanced

If there are any other suggestions out there, please reply! The linked doc above does not seem to work well if you are using regex patterns.