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
Sorkstryparen
Sorkstryparenโ€ข13mo ago
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 deranged . I worked great.. but then realized that they have issues with translating in async RSC.. theoDisgusted 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
GitHub
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 ...
No description
Shobky
Shobkyโ€ข13mo ago
The easiest way is to use next-intl. See implementation here https://github.com/shobky/solymaneya
GitHub
GitHub - shobky/solymaneya: [email protected] internationalization with nex...
[email protected] internationalization with next-intl. Contribute to shobky/solymaneya development by creating an account on GitHub.
Sorkstryparen
Sorkstryparenโ€ข13mo ago
But how do you do with async RSC's? And if you use basePath there is also a bug
Sorkstryparen
Sorkstryparenโ€ข13mo ago
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...
Shobky
Shobkyโ€ข13mo ago
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
Sorkstryparen
Sorkstryparenโ€ข13mo ago
yee I saw a workaround.. but that is awful tbh.. ๐Ÿ˜…
Shobky
Shobkyโ€ข13mo ago
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
Sorkstryparen
Sorkstryparenโ€ข13mo ago
Still wierd that we can't just translate.. that we need to do a patchwork to solve this.. ๐Ÿ˜“
Shobky
Shobkyโ€ข13mo ago
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
Sorkstryparen
Sorkstryparenโ€ข13mo ago
next-translate is my go to lib.. at least atm ๐Ÿ˜ƒ
Shobky
Shobkyโ€ข13mo ago
I'll look in it next time I have to do internationalization which I hope it doesn't happen again
Sorkstryparen
Sorkstryparenโ€ข13mo ago
Haha.. word! Great dissussion, thx!
Shobky
Shobkyโ€ข13mo ago
Thank you!
Jakub
Jakubโ€ข13mo ago
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.
Eddy
Eddyโ€ข12mo ago
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
Want results from more Discord servers?
Add your server