Use i18next with app folder and without locale in url

[rsereir]

Question

I can't use this example without locale in the router.

I have to mask the locale in URL to avoid override the website language when url is sharing.
It's not working when i remove the (lng) folder in the /app directory.

Also, i think why we use the redirect on /${lng} for locale switcher instead of the changeLanguage function of i18n ?

I don't really understand this approach..

Thank you for your help :)

[adrai]

This example is based on having the locale in the url (like the old next.js i18n feature)
Beside that app directory now strongly recommends server side first. So you need a way to detect the language on serverside -> middleware...

If you only have client side rendering then you can detect the language with the browser-languageDetector plugin or similar and don't need to have the locale in the url.

[rsereir]

Thank you @adrai for your answer !

I understand the approach better now.
This issue could be useful for other people who, like me, would like to mask the locale of the URL.

What approach can you advise us, knowing that it is indeed recommended to manage this on the server side ?

If i custom the middleware, i just have to set response.cookies.set(cookieName, lngInReferer) ? And for the switcher, use the i18n.changeLanguage() do the job ?

Thank you again for your work.

[adrai]

Beside the client side only approach idk.
I'm not part of the Vercel/Next.js team, so you might ask them?

[adrai]

Here a "hacky" example that tries to not rely on the locale to be in the url: https://github.com/i18next/next-13-app-dir-i18next-no-locale-path-example

[rsereir]

@adrai Oh okay, thank you for your POC, I took the time to do some tests, but i have 2 errors in webpack: Error: Text content does not match server-rendered HTML. and Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. with your fork.

Also, i have another strange things:

• When i switch to DE on the "client page" if i navigate with buttons to the main page, i was in english again
• when i refresh the page in DE, i see english text for few miliseconds

I tried to investigate but it seems really complicate to understand where is the problem

[adrai]

Like said... hacky... and btw: it's just a warning

[rsereir]

Yes i know, but it's not a render issue?

[adrai]

You may ask the vercel/next.js team

[dvrd]

@rsereir

Because the languages are not synced the backend renders first with the fallback version and then it renders again with the language detection making both version not match. You can use dynamic to import then and remove ssr. Put I still haven't found a solution that doesn't force me to avoid doing dynamic imports all over the place. If you get any farther plz share

[DavidRouyer]

I'm looking for the same thing...

I found this: https://github.com/QuiiBz/next-international?tab=readme-ov-file#rewrite-the-url-to-hide-the-locale

https://github.com/QuiiBz/next-international/blob/266f8ad9ed188f93c8678e40344323c0b5b050fb/packages/next-international/src/app/middleware/index.ts#L25-L35

https://github.com/i18next/next-13-app-dir-i18next-example/blob/3d653a46ae33f46abc011b6186f7a4595b84129f/middleware.js#L26

If you use return NextResponse.rewrite(new URL(`/${lng}${req.nextUrl.pathname}`, req.url)) instead of redirect it works