next-international 'Unsupported locale error' on routes not matched by middleware.

My setup is as described in the documentation

src/app
├── [locale]
│   ├── layout.tsx
│   └── page.tsx

The layout contains the following code:

import { I18nProviderClient } from '~locales/client';

interface Props {
    children: ReactNode;
    params: { locale: string };
}

const Layout = ({ children, params }: Props) => {
    console.log('Layout', params);

    return <I18nProviderClient locale={params.locale}>{children}</I18nProviderClient>;
};

export default Layout;

However, this locale prop also receives favicon.ico in the locale property.

>  Layout { locale: 'favicon.ico' }

Next-international also logs the following error [next-international] The locale 'favicon.ico' is not supported. Defined locales are: [en, nl].

The favicon is not matched in the middleware, just like in the docs (https://next-international.vercel.app/docs/app-setup#setup-middleware)

To Reproduce I don't think this is repository specific, but you can clone https://github.com/pixel-perfect-agency/next-foundation

Expected behavior Favicon and other routes ignored in middleware matcher should not be perceived as locales

About:

next-international version [e.g. 1.2.3]
Next.js version [e.g. 14.1.0]

Jan 23 '24 13:01 Willem-Jaap

Is your favicon located inside the [locale] folder? Otherwise if it's not ignored but should be as specified in your middleware configuration, I believe it's a Next.js bug.

Jan 23 '24 16:01 QuiiBz

Well, thats the fun part, I don't actually have a favicon. Seems like Chrome automatically fetches /favicon.icon even if it is not in the <head>. https://bugs.chromium.org/p/chromium/issues/detail?id=39402#c47

But, in this case I think `next-international should ignore [locale] props not matched by middleware, like my '/assets'

Maybe the matcher can be passed to the I18nMiddleware like this and then don't log errors for routes not matched by this expression.

Jan 24 '24 08:01 Willem-Jaap

Any update on this? I keep getting this: [next-international] The locale 'favicon.ico' is not supported. Defined locales are: [en, ar]. Even though the middleware should be ignoring the favicon file as a route. This causes my content to disappear sometimes and only the layout shows.

I am using rewrite as the mapping strategy, when navigating to a page should I append the current locale to the start of the href?

Mar 13 '24 12:03 2Senn

This is usually caused by:

the middleware being miss-configured
the favicon.ico file being placed inside the [locale] folder, which should instead be inside the app (or src) folder

Could you share more context on your app?

I am using rewrite as the mapping strategy, when navigating to a page should I append the current locale to the start of the href?

This is done automatically by the middleware if you don't do it manually.

Mar 16 '24 09:03 QuiiBz

I have the middleware exactly as it is in the docs. My favicon is not in the locale folder. I think the problem is mainly for the home page "/" since everything else works fine.

I have an api that gets called on the main page route and for some reason it does not get called. I have an api directory for next auth in my app directory but not inside the [locale] route. Could this be causing issues?

EDIT: Issue was next.js config related. works perfectly now. Thanks!

Mar 16 '24 11:03 2Senn

next-international next-international copied to clipboard

'Unsupported locale error' on routes not matched by middleware.

next-international
next-international copied to clipboard