next-intl not recognising default locale

Question

While trying out next-intl for the app directory I encountered a problem where the default locale does not seem to be recognized. I also tried the client side version before and also had massive problems despite following the docs exactly for each step.

For clarification I use Next.js v13.4.0 and [email protected] I set German and English as locales and English as default. On German it works fine but I could not switch over to English. It throws th error NEXT_NOT_FOUND indicating that this locale does not exist.

next.config

/** @type {import('next').NextConfig} */

const withNextIntl = require('next-intl/plugin')(
  // This is the default (also the `src` folder is supported out of the box)
  './i18n.ts'
);

const nextConfig = {
  experimental: {
    appDir: true,
  }
}

module.exports = withNextIntl(nextConfig);

middleware.ts

import createMiddleware from 'next-intl/middleware';
 
export default createMiddleware({
  // A list of all locales that are supported
  locales: ['en', 'de'],
  defaultLocale: 'en',
});
 
export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)']
};

LangSwitch.tsx Locales should be changed here. This component is part of the navbar

import Link from 'next-intl/link';

export default function LangSwitch() {
    return (
        <div className='flex flex-col'>
            LANG SWITCH
            <Link href="/" locale="en" className='font-bold m-1'>
                ENG
            </Link>
            <Link href="/" locale="de" className='font-bold m-1'>
                DEU
            </Link>
        </div>
    )
};

As mentioned the navbar works fine just switching locales does not work. I had the same problem with the client side evrsion aswell. The way I built the LangSwitch is exactly as the docs say this should work. So currently I have no idea what could be the solution.

I tried changing the next.js version and also the next-intl version. Every time similar problems occured. I also deleted node_modules and package-lock.json to see if this could help.

Answer 1

It seems like next-intl runs into an infinite redirect loop when attempting to revert to the default locale using next-intl/link. It looks like it returns a redirect response status with nowhere to redirect to.

One temporary workaround I found is to give it somewhere to redirect to by composing the middleware then adding a Location header after the response is setup:

  if (pathname.startsWith('/en')) {
    const { host, protocol } = request.nextUrl;
    response.headers.set('Location', `${protocol}//${host}`);
  }

---

Edit: I tried out the latest release candidate (3.0.0-rc.10) and this issue seems to have been fixed 🤞