Locale not found, when using 'rewrite' (urlMappingStrategy) about next-international HOT 11 CLOSED

@EliasGcf have you ignored the /favicon.ico path inside the middleware's matcher config? The regex should be something like /((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)

Yes, i copy the regex from the docs:

export const config = {
  matcher: ['/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)'],
};

from next-international.

@QuiiBz Oh yeah, the i18n config in my next.config.js was the issue.
When I remove it, the routes inside the [locale] folder are working without the locale in the URL like expected.

Perfect, thank you!

from next-international.

Thanks for the kind words. I've tried updating the next-app example but I'm not able to reproduce the issue with urlMappingStrategy: rewrite and client components. Could you provide a reproduction repository or CodeSandbox?

from next-international.

@glubb92 This error was happening to me when I didn't have the app/favicon.ico file. Maybe it's your case too.

Before add the app/favicon.ico
layout.tsx - params log:

After:

@QuiiBz This information might help you! 💜

from next-international.

@EliasGcf have you ignored the /favicon.ico path inside the middleware's matcher config? The regex should be something like /((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)

from next-international.

I've gotten the same problem, but in my use case it happens because I have an app-dir and a pages-dir at the same time (need this to migrate my application from pages-dir to app-dir).

For some reason I don't need a locale-folder when running them at the same time (I'll open a new issue for this later, so not important at the moment).

Here is my repro for it, maybe I've done something wrong, but it works in pages and app-dir on the server, but not app-dir on the client: https://github.com/aulonm/next-international-repro (I've updated the repo since last time I used it, so if you already have it locally, pull for newest changes)

Edit: My thoughts here are that some of the next app-dir only functions are not working the same how they are intended when running both pages and app at the same time. I know that usePathname returns null when the app is running in both pages and app dir, so maybe there is something going on there

from next-international.

Thanks for the reproduction @aulonm, I've identified some issues:

• inside pages/_app.tsx, the locale prop should be locale={pageProps.locale} instead of locale="en"
• your app folder inside the app directory doesn't have a [locale] route segment. You should move app/app/* to app/app/[locale]/*
• I'm not sure if using the rewrite strategy works when the [locale] segment isn't the first path in the URL (yours is app). Do you need this app?

from next-international.

@QuiiBz Thanks for your reply!

So I tried to reproduce it in a sandbox. https://codesandbox.io/p/sandbox/epic-kepler-7gg34c

Somehow the "/" url is not working (due to not getting the language from the cookie, I guess it is sandbox related?), but if you navigate to /de/demo, you'll see, that the page is working. If I navigate to /test, which is not inside [locale] folder, I'll get the "Locale not Found" error.
If I navigate to /demo, which is working with the local in the url, I'll get an 404 error.

So how do I setup the structure, if I want translations on client and server, but no locale in the url? Maybe I just misconfigured something, but the structure without the [locale] folder is working with server components. The translations are displayed and the url is correct, without the locale in it. Only when I try to use client components, I'll get this error.

Thanks for your support so far!

from next-international.

@EliasGcf Thanks for you tip, but I have a favicon, so it wasn't the issue in my case.

@aulonm Indeed I had an empty pages folder, but sadly deleting it wasn't fixing it either. 🙁

from next-international.

Thanks for the reproduction @aulonm, I've identified some issues:

• inside pages/_app.tsx, the locale prop should be locale={pageProps.locale} instead of locale="en"
• your app folder inside the app directory doesn't have a [locale] route segment. You should move app/app/* to app/app/[locale]/*
• I'm not sure if using the rewrite strategy works when the [locale] segment isn't the first path in the URL (yours is app). Do you need this app?

Oh yes, that fixed the issue, my bad. Thanks!

from next-international.

Oh yes, that fixed the issue, my bad. Thanks!

You're welcome!

@glubb92 thanks for the reproduction CodeSandbox. I've noticed that you've configured the i18n options inside next.config.js, but this isn't needed for the App Router.

Also, all routes should be inside a [locale] route segment (folder), but that's not the case for the test page. There might be an issue with the locale cookie due to how CodeSandbox works too.

from next-international.