Overcoming the language barrier for users who use your software is an important topic.
English is no longer the universal language of the internet....
For further actions, you may consider blocking this person and/or reporting abuse
Great article. Thank you!
Wow! This is long a resourceful article. Good job with covering i18next in its completeness.
Would you mind adding a small Table of Contents? I wanna use i18next in my next project and was evaluating it with next.js. Seems not so complicated.
Though I also like the library suggested by @pretaporter down in the comment because of its very compact size but haven't tried it yet.
Thanks, @pankajpatel ! Do not hesitate ask any questions about usage
eo-locale
, I would happy to helpThanks @pretaporter for the help.. sure will reach out to you 🙌
i want to now that does i18n supports Hindi Language
thx for the TOC advice, just added 😉
super 🚀🚀🚀
Wow, an amazingly detailed and thorough walkthrough. I was looking for a good intro article on i18n in React for one of our junior devs and this covers everything. Thanks for saving me a lot of time.
Thanks Adriano, good post!
But I have a couple of questions:
1) How do you solve the following sentence `I received a gift from Abruzzo' '...from Marche' and '... from Lombardia' giving the fact that in the Italian language (and in many other) the result should be 'dall'Abruzzo', 'dalle Marche' and 'dalla Lombardia'?
2) What is the best way to introduce markup in the text to be translated, if possible?
Something like "I'd like to drink a Red wine" without the need to split this short sentence in three parts?
Thank you
Ciao Paolo!
1) I would use the context feature of i18next combined with the interpolation functionality:
2) best is to use the Trans component for this:
Great article!
I had to localise lots of apps and the best translation management so far was Google Spreadsheet. I wrote a small cli script to sync spreadsheet to yml files with flat structure, so it's easy to see changes in git diff.
I hope it can be useful for someone else too - github.com/razbakov/sourcy
So this is all translated runtime using downloaded json files?
I much prefer Angular's built in compile-time i18n, simple to use, and doesn't add any overhead at all for performance.
Isn't there a compile-time React i18n project? I can't imagine going back to runtime translation.
Thanks in advance
probably fbt is than more suited for you? dev.to/adrai/i18n-in-the-multivers...
Thanks mate, I'll take a look. cheers
btw: there is no need to lazy load translations, you can also bundle them and add them on init for example… i18next.com/how-to/add-or-load-tra...
Hello!
This was really helpful, however I'm still a bit confused.
What would be a neat way to handle i18n if the values are coming from a database. So there's a value in the db but on the UI we need to show a "friendly" translated version of this.
Example -
Db value -> Tech
UI En -> Technology
UI Fr -> French translation of Tech
Cheers!
just save the translation keys (not the actual translation) in the database…
or at least sync those with the TMS, like with locize via API or via CLI
Thank you Adriano, I learnt a lot of topics with your article.
I have one doubt related with the topic. In a existing project, how do you check if codebase is clean of hard-coded texts? Do you use any library or lint extension to check and prevent hard coded texts?
personally, I always started with i18next from day 1... also if finally just using 1 language...
But I would just do this one file at a time, manually, it's the safest way...
I doubt there is an automized solution that catches all cases...
Oh my! this is a really big article, took me quite some time to reach the comment section.
I wish there would be a cleaner way for implementing internationalization, internationalization sure sends chills down my spine 😅
I have used react-intl in the past, will continue to explore more, internationalization definitely seems like a pain point for all.
I know... pretty long article, but I wanted to include from the first line of i18n code until the production setup... 🤷♂️
Incredible content! Thank you!
awesome, bro
Really in-depth article! Have you come accross any examples of using the universal-language-detector to get server side detection?
not yet... do you mean this? universal-language-detector.vercel...
Yes exactly this one I was trying to add it on the server side on next JS... no luck at all
You may need to open an issue in the repo there. 🤷♂️
Thank you for the article! I would recommend to have a briefly look to github.com/ibitcy/eo-locale
Wonderful article! Thanks a lot @adrai 🤩
Thank you for the nice words.
Based on this example react app, there’s also this video demoing locize…
You are a life saver. Ty ❤️