i18next App router setup
Hi! Is there some good resource about setting up i18next on app router? I need it to work on server components, client components and store the lang in cookies, so it wouldnt show up in route.
Do you know how i'd approach that?
15 Replies
Im looking for this as well. But it seems hard to achive this. I have been looking for a solution quite some while. What scares me is that many threads I find that are looking for the same thing are from like 2021.. and there is STILL no good solution.
For people that just wanna translate and do not care about the routing etc. they are left out.
I just wanna add some package that handles the translation in RSC and RCC.. period.
i18next feels like they gave up with nextJS 13 and App-router. Their article about setting it up feels bitter imo 😅
I first thought next-intl was a good chooice because there you can in the middleware rewrite their cookies and set the culture, no need for using lang slug 
.
I worked great.. but then realized that they have issues with translating in async RSC.. 
best solution I found is https://github.com/aralroca/next-translate. It's straight forward and seems to solve my needs. The only "issue" right now is that you still need to put all folders in that awful slug [lang].
And they use nextJS i18n solution behind the scen, and to hide the culture from the URL you need to do a rewrite and NextJS ALWAYS include culture in that case.. for some reason that is beyond me 😄 .
You can read more in this thread at NextJS:
https://github.com/vercel/next.js/discussions/29932
.
I worked great.. but then realized that they have issues with translating in async RSC.. best solution I found is https://github.com/aralroca/next-translate. It's straight forward and seems to solve my needs. The only "issue" right now is that you still need to put all folders in that awful slug [lang].
And they use nextJS i18n solution behind the scen, and to hide the culture from the URL you need to do a rewrite and NextJS ALWAYS include culture in that case.. for some reason that is beyond me 😄 .
You can read more in this thread at NextJS:
https://github.com/vercel/next.js/discussions/29932GitHub
i18n without Sub-path Routing and Domain Routing · vercel next.js ·...
Describe the feature you'd like to request I'm developing a SaaS application and I would like to manage the i18n without sub-path routing or domain routing. Describe the solution you'd ...
The easiest way is to use next-intl.
See implementation here
https://github.com/shobky/solymaneya
GitHub
GitHub - shobky/solymaneya: Next@13.4 internationalization with nex...
Next@13.4 internationalization with next-intl. Contribute to shobky/solymaneya development by creating an account on GitHub.
But how do you do with async RSC's?
And if you use basePath there is also a bug
GitHub
Server components feature doesn't work with async pages · amannn ne...
Description I'm trying server components example. Everything works fine but I need to turn my pages async since react query hydrate function requires it. Of course there might be other librarie...
I didn't experience using it with async RSC's though it worked very well for my use case as it was just a static site
You can just use a wrapper same way you deal with addin RCC as a child to RSC but this way they both are server
yee I saw a workaround.. but that is awful tbh.. 😅
It's an extra step but it can be cleaner sometime
I like to put an index.tsx file in the component folder and import children into it to do the wrapping it makes it much cleaner
Still wierd that we can't just translate.. that we need to do a patchwork to solve this.. 😓
I was really annoyed before I found next-intl all other solutions are just crap and docs aren't clear so At least it works
next-translate is my go to lib.. at least atm 😃
I'll look in it next time I have to do internationalization which I hope it doesn't happen again
Haha.. word!
Great dissussion, thx!
Thank you!
If anyone still struggles with this, i made a starter for app router with i18n, lots of playing around, but finally found the solution that works fine in every scenario: https://github.com/jakubczarnowski/t3-starter-supabase-i18n
GitHub
GitHub - jakubczarnowski/t3-starter-supabase-i18n: T3 Stack starter...
T3 Stack starter - App Dir, Supabase, I18n. Contribute to jakubczarnowski/t3-starter-supabase-i18n development by creating an account on GitHub.
Thank you for this! I was so desperately looking at some way of implementing i18n and couldnt get it to work with type safety properly. Your solution is great.
Just one question. How would you implement a dropdown that allows you to switch languages? Just trying to wrap my head around this