Giters

i18next / next-app-dir-i18next-example

Next.js 13/14 app directory feature in combination with i18next

Home Page:https://locize.com/blog/next-app-dir-i18n/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Use i18next with app folder and without locale in url

rsereir opened this issue · comments

commented

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 :)

commented

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.

commented

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.

commented

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

commented

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

commented

@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

commented

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

commented

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

commented

You may ask the vercel/next.js team

commented

@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